/* ═══════════════════════════════════════════════════════════════
   FICHA TÉCNICA MAPA — EJIDO EL SARGENTO Y SU ANEXO LA VENTANA · TAO MÉXICO
   ficha-tecnica-mapa-sargento.css
═══════════════════════════════════════════════════════════════ */

/* ─── VARIABLES DE MARCA ───────────────────────────────────── */
:root {
  --navy:         #385265;
  --gold:         #b3ab85;
  --cream:        #f3eee3;
  --graphite:     #403d37;
  --slate:        #7395a7;
  --white:        #ffffff;
  --line:         rgba(64, 61, 55, 0.14);
  --line-heavy:   rgba(64, 61, 55, 0.28);

  --sin:          #dc2626;
  --sin-dark:     #7f1d1d;
  --con:          #15803d;
  --con-dark:     #14532d;

  --font-display: 'Archivo Expanded', sans-serif;
  --font-body:    'Manrope', sans-serif;
}

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

body {
  font-family: var(--font-body);
  background: #b8b0a6;
  color: var(--graphite);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 48px;
  min-height: 100vh;
}

/* ─── CONTENEDOR PÁGINA ─────────────────────────────────────── */
.ft-page {
  width:          794px;
  min-height:     1122px;
  background:     var(--white);
  position:       relative;
  display:        flex;
  flex-direction: column;
  box-shadow:     0 4px 32px rgba(0,0,0,0.28), 0 1px 6px rgba(0,0,0,0.18);
  overflow:       hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════ */
.ft-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 44px 10px;
  border-bottom:   2px solid var(--line-heavy);
  background:      #d6caba;
  flex-shrink:     0;
  position:        relative;
  z-index:         3;
}

.ft-logo img {
  height:         70px;
  width:          auto;
  display:        block;
  object-fit:     contain;
  object-position:left center;
}

.ft-doc {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
}

.ft-doc__eyebrow {
  font-size:      10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color:          var(--slate);
  font-weight:    700;
}

.ft-doc__id {
  font-family:    var(--font-display);
  font-size:      28px;
  font-weight:    800;
  letter-spacing: 0.06em;
  color:          var(--graphite);
  line-height:    1;
}


/* ═══════════════════════════════════════════════════════════════
   FRANJA TÍTULO — con vector topográfico
═══════════════════════════════════════════════════════════════ */
.ft-strip {
  position:    relative;
  overflow:    hidden;
  padding:     18px 44px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ft-strip__topo {
  position:       absolute;
  right:          -280px;
  top:            50%;
  transform:      translateY(-50%);
  width:          650px;
  height:         auto;
  mix-blend-mode: multiply;
  filter:         invert(1) sepia(1) hue-rotate(10deg) saturate(0.7) opacity(0.18);
  pointer-events: none;
  object-fit:     contain;
  z-index:        0;
}

.ft-strip__kicker {
  position:       relative;
  z-index:        1;
  display:        block;
  font-size:      10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--gold);
  font-weight:    700;
  margin-bottom:  8px;
}

.ft-strip__title {
  position:       relative;
  z-index:        1;
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      29px;
  letter-spacing: -0.01em;
  line-height:    1.06;
  text-transform: uppercase;
  color:          var(--graphite);
}

.ft-strip__loc {
  position:    relative;
  z-index:     1;
  display:     flex;
  align-items: center;
  gap:         9px;
  margin-top:  12px;
}

.ft-strip__loc-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--gold);
  flex-shrink:   0;
}

.ft-strip__loc-city {
  font-size:   27px;
  font-weight: 800;
  color:       var(--navy);
}

.ft-strip__colonia {
  position:    relative;
  z-index:     1;
  margin-top:  5px;
  margin-left: 17px;
  font-size:   13px;
  color:       var(--slate);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   MAPA INTERACTIVO
═══════════════════════════════════════════════════════════════ */
.ft-mapa {
  flex:           none;
  display:        flex;
  flex-direction: column;
}

.ft-mapa__header {
  flex-shrink:    0;
  background:     var(--navy);
  color:          var(--cream);
  padding:        8px 14px;
  font-size:      8px;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom:  2px solid var(--gold);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            7px;
}

.ft-mapa__header-left {
  display:     flex;
  align-items: center;
  gap:         7px;
}

.ft-mapa__header svg {
  width:    12px;
  height:   12px;
  opacity:  0.80;
  flex-shrink: 0;
}

/* ── Leyenda estatus de propiedad ─────────────────────────── */
.ft-legend {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.ft-legend__item {
  display:     flex;
  align-items: center;
  gap:         5px;
  opacity:     0.92;
}

.ft-legend__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
  box-shadow:    0 0 0 1px rgba(255,255,255,0.35);
}

.ft-legend__dot--con { background: var(--con); }
.ft-legend__dot--sin { background: var(--sin); }

.ft-mapa__canvas {
  width:  calc(100% - 88px);
  height: 700px;
  margin: 18px 44px 0;
}


/* ═══════════════════════════════════════════════════════════════
   BOTÓN CENTRAR MAPA
═══════════════════════════════════════════════════════════════ */
.ft-reset-btn {
  width:           26px;
  height:          26px;
  display:         flex !important;
  align-items:     center;
  justify-content: center;
  color:           #385265 !important;
  background:      #fff !important;
  text-decoration: none !important;
  transition:      background 0.15s, color 0.15s;
}

.ft-reset-btn:hover {
  background: #385265 !important;
  color:      #f3eee3 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PINES DE TERRENO — SIN ESCRITURA (rojo) / CON ESCRITURA (verde)
═══════════════════════════════════════════════════════════════ */
.ft-pin {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-body);
  font-size:       10px;
  font-weight:     800;
  color:           #ffffff;
  cursor:          pointer;
  transition:      transform 0.15s;
  box-shadow:      0 0 0 2px #ffffff, 0 3px 10px rgba(0,0,0,0.55);
}

.ft-pin--sin { background: var(--sin); border: 3px solid var(--sin-dark); }
.ft-pin--con { background: var(--con); border: 3px solid var(--con-dark); }

.ft-pin--approx { border-style: dashed; }

.ft-pin:hover { transform: scale(1.25); }


/* ═══════════════════════════════════════════════════════════════
   POPUP TERRENOS
═══════════════════════════════════════════════════════════════ */
.ftp-wrap .leaflet-popup-content-wrapper {
  padding:       0 !important;
  border-radius: 8px !important;
  overflow:      hidden !important;
  box-shadow:    0 6px 20px rgba(0,0,0,0.28) !important;
}
.ftp-wrap .leaflet-popup-content {
  margin: 0 !important;
  width:  auto !important;
}
.ftp-wrap .leaflet-popup-tip {
  background: #ffffff !important;
}

.ftp { font-family: 'Manrope', sans-serif; min-width: 226px; }

.ftp-head {
  padding:         10px 14px 8px;
  display:         flex;
  align-items:     center;
  gap:             9px;
}
.ftp-head--sin { background: var(--sin); border-bottom: 2px solid var(--sin-dark); }
.ftp-head--con { background: var(--con); border-bottom: 2px solid var(--con-dark); }

.ftp-head__num {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      rgba(0,0,0,0.22);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     800;
  color:           #ffffff;
  flex-shrink:     0;
}
.ftp-head__name {
  font-size:      13px;
  font-weight:    700;
  color:          #ffffff;
  letter-spacing: 0.02em;
}

.ftp-body {
  padding:       10px 14px 8px;
  border-bottom: 1px solid #e5e7eb;
}
.ftp-stat { margin-bottom: 7px; }
.ftp-lbl {
  display:        block;
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          #7395a7;
  margin-bottom:  1px;
}
.ftp-val {
  font-size:   15px;
  font-weight: 800;
  color:       #403d37;
}
.ftp-row2 { display: flex; gap: 14px; }
.ftp-row2 .ftp-stat { flex: 1; margin-bottom: 0; }
.ftp-addr {
  font-size:   10px;
  color:       #6b7280;
  line-height: 1.45;
  margin-top:  7px;
}
.ftp-tag {
  display:        inline-block;
  margin-top:     6px;
  padding:        2px 8px;
  border-radius:  999px;
  font-size:      8.5px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ftp-tag--con { background: rgba(21,128,61,0.12); color: var(--con-dark); }
.ftp-tag--sin { background: rgba(220,38,38,0.12); color: var(--sin-dark); }

.ftp-btns {
  display:    flex;
  gap:        6px;
  padding:    10px 14px 13px;
  background: #ffffff;
  border-top: 1px solid #e8e2d8;
}
.ftp-btn {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  padding:         8px 6px;
  border-radius:   999px;
  background:      #385265;
  border:          1.5px solid #b3ab85;
  color:           #ffffff !important;
  font-family:     'Archivo Expanded', sans-serif;
  font-size:       7.5px;
  font-weight:     700;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  text-decoration: none !important;
  transition:      background 0.15s, border-color 0.15s;
  white-space:     nowrap;
}
.ftp-btn:hover { background: #2c4152; border-color: #ffffff; }
.ftp-btn--na   { opacity: 0.30; pointer-events: none; cursor: default; }


/* ═══════════════════════════════════════════════════════════════
   ACCIÓN MAPA — botón flotante sutil
═══════════════════════════════════════════════════════════════ */
.ft-map-action {
  display:         flex;
  justify-content: flex-end;
  padding:         6px 44px 0;
}

.ft-map-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 26px;
  background:      var(--navy);
  border:          1.5px solid var(--gold);
  border-radius:   999px;
  color:           #ffffff;
  font-family:     var(--font-display);
  font-size:       8.5px;
  font-weight:     700;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  text-decoration: none;
  box-shadow:      0 4px 18px rgba(56,82,101,0.30), 0 1px 4px rgba(0,0,0,0.14);
  transition:      transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.ft-map-btn svg {
  color:       var(--gold);
  flex-shrink: 0;
}

.ft-map-btn:hover {
  transform:    translateY(-2px);
  box-shadow:   0 8px 26px rgba(56,82,101,0.38), 0 2px 6px rgba(0,0,0,0.16);
  border-color: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   NOTA — predios sin georreferencia disponible
═══════════════════════════════════════════════════════════════ */
.ft-note {
  margin:        10px 44px 0;
  padding:       10px 16px;
  border:        1px solid var(--line-heavy);
  border-left:   3px solid var(--gold);
  background:    var(--cream);
  border-radius: 4px;
}

.ft-note__title {
  display:        block;
  font-size:      8.5px;
  font-weight:    800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--navy);
  margin-bottom:  3px;
}

.ft-note__body {
  font-size:   10.5px;
  color:       var(--graphite);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.ft-footer {
  border-top:      2px solid var(--line-heavy);
  padding:         18px 44px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  background:      var(--graphite);
  color:           var(--cream);
  flex-shrink:     0;
  margin-top:      auto;
}

.ft-footer__cta {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ft-footer__contact {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            5px;
  text-align:     right;
}

.ft-footer__links {
  font-size:   12px;
  opacity:     0.72;
  line-height: 1.5;
}

.ft-footer__links a {
  color:           inherit;
  text-decoration: none;
}

.ft-footer__links a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════
   EDICIÓN INLINE
═══════════════════════════════════════════════════════════════ */
[contenteditable]:focus {
  outline:        2px dashed var(--gold);
  outline-offset: 4px;
  background:     rgba(179, 171, 133, 0.07);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 860px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  html, body {
    height:   100dvh;
    overflow: hidden;
  }

  body {
    padding:    0;
    background: #b8b0a6;
  }

  .ft-page {
    width:          100%;
    height:         100dvh;
    overflow:       hidden;
    box-shadow:     none;
    display:        flex;
    flex-direction: column;
  }

  .ft-header   { padding: 10px 24px 9px; flex-shrink: 0; }
  .ft-logo img { height: 52px; }
  .ft-doc__id  { font-size: 22px; }

  .ft-strip           { padding: 14px 24px 12px; flex-shrink: 0; }
  .ft-strip__title    { font-size: 24px; }
  .ft-strip__loc-city { font-size: 22px; }

  .ft-mapa {
    flex:           none;
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
  }

  .ft-mapa__canvas {
    height:     calc(100dvh - 350px);
    min-height: 200px;
    max-height: none;
    width:      calc(100% - 48px);
    margin:     10px 24px 0;
  }

  .ft-map-action { padding: 8px 24px 0;  flex-shrink: 0; }
  .ft-note       { margin: 8px 24px 0; }
  .ft-footer     { padding: 14px 24px;  flex-shrink: 0; margin-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Móvil (≤ 520px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .ft-header    { padding: 8px 16px; }
  .ft-logo img  { height: 38px; }
  .ft-doc__eyebrow { font-size: 8px; letter-spacing: 0.18em; }
  .ft-doc__id   { font-size: 15px; }

  .ft-strip           { padding: 10px 16px 8px; }
  .ft-strip__topo     { right: -240px; width: 500px; }
  .ft-strip__kicker   { font-size: 8px; letter-spacing: 0.2em; margin-bottom: 5px; }
  .ft-strip__title    { font-size: 17px; }
  .ft-strip__loc      { margin-top: 7px; gap: 7px; }
  .ft-strip__loc-dot  { width: 7px; height: 7px; }
  .ft-strip__loc-city { font-size: 16px; font-weight: 800; }
  .ft-strip__colonia  { font-size: 11px; margin-left: 14px; }

  .ft-mapa__header  { font-size: 7px; padding: 5px 12px; gap: 6px; }
  .ft-legend        { gap: 8px; }
  .ft-legend__item span:last-child { display: none; }

  .ft-mapa__canvas {
    height:     calc(100dvh - 272px);
    min-height: 150px;
    max-height: none;
    width:      calc(100% - 32px);
    margin:     8px 16px 0;
  }

  .ft-map-action   { padding: 7px 16px 0; justify-content: center; }
  .ft-map-btn      { font-size: 8px; padding: 9px 20px; letter-spacing: 0.13em; }
  .ft-note         { margin: 7px 16px 0; padding: 8px 12px; }
  .ft-note__body   { font-size: 10px; }

  .ft-footer {
    padding:        10px 16px;
    flex-direction: column;
    align-items:    flex-start;
    gap:            5px;
    margin-top:     0;
  }
  .ft-footer__cta     { font-size: 10px; letter-spacing: 0.18em; }
  .ft-footer__contact { align-items: flex-start; }
  .ft-footer__links   { font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════════════
   IMPRESIÓN
═══════════════════════════════════════════════════════════════ */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
  }

  html, body {
    background: white !important;
    margin:     0     !important;
    padding:    0     !important;
    display:    block !important;
    width:      210mm !important;
  }

  .ft-page {
    width:          210mm  !important;
    height:         297mm  !important;
    min-height:     unset  !important;
    overflow:       hidden !important;
    margin:         0      !important;
    box-shadow:     none   !important;
    display:        flex   !important;
    flex-direction: column !important;
  }

  .ft-header {
    padding:     14px 44px 12px !important;
    flex-shrink: 0 !important;
  }

  .ft-strip        { flex-shrink: 0 !important; }
  .ft-mapa__header { flex-shrink: 0 !important; }
  .ft-map-action   { flex-shrink: 0 !important; padding: 6px 44px 6px !important; }
  .ft-note         { flex-shrink: 0 !important; }

  .ft-mapa {
    flex:           none   !important;
    display:        flex   !important;
    flex-direction: column !important;
  }

  .ft-mapa__canvas {
    height:     183mm !important;
    max-height: none  !important;
    min-height: none  !important;
    width:      calc(210mm - 88px) !important;
    margin:     14px 44px 4px !important;
  }

  .ft-footer {
    flex-shrink: 0    !important;
    margin-top:  auto !important;
  }

  .leaflet-control-zoom,
  .leaflet-control-container .ft-reset-btn {
    display: none !important;
  }
}