/* ═══════════════════════════════════════════════════════════════
   FICHA TÉCNICA MAPA — CAMPECHE · TAO MÉXICO
   ficha-tecnica-mapa-campeche.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);

  --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;
  gap:            7px;
}

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

.ft-mapa__canvas {
  width:  calc(100% - 88px);
  height: 720px;
  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 — ROJO
═══════════════════════════════════════════════════════════════ */
.ft-pin {
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      #dc2626;
  border:          3px solid #7f1d1d;
  box-shadow:      0 0 0 2px #ffffff, 0 3px 10px rgba(0,0,0,0.55);
  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;
}

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


/* ═══════════════════════════════════════════════════════════════
   TOOLTIP REFERENCIAS — AMARILLO
═══════════════════════════════════════════════════════════════ */
.ft-ref-tooltip {
  background:    #f59e0b !important;
  color:         #78350f !important;
  border:        1px solid #78350f !important;
  border-radius: 4px !important;
  font-family:   'Manrope', sans-serif !important;
  font-size:     11px !important;
  font-weight:   700 !important;
  padding:       4px 8px !important;
  box-shadow:    0 2px 6px rgba(0,0,0,0.3) !important;
  white-space:   nowrap !important;
}
.ft-ref-tooltip::before { border-top-color: #f59e0b !important; }


/* ═══════════════════════════════════════════════════════════════
   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: 210px; }

.ftp-head {
  background:      #dc2626;
  border-bottom:   2px solid #7f1d1d;
  padding:         10px 14px 8px;
  display:         flex;
  align-items:     center;
  gap:             9px;
}
.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-addr {
  font-size:   10px;
  color:       #6b7280;
  line-height: 1.45;
  margin-top:  5px;
}

.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;
}


/* ═══════════════════════════════════════════════════════════════
   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__whatsapp {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  color:           var(--cream);
  font-size:       13px;
  font-weight:     700;
  text-decoration: none;
  transition:      opacity 0.15s;
}

.ft-footer__whatsapp svg {
  flex-shrink: 0;
  color:       #4ec76a;
}

.ft-footer__whatsapp:hover { opacity: 0.78; }

.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;
  }

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

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

  /* Mapa: no crece con flex, el canvas tiene altura calculada */
  .ft-mapa {
    flex:           none;
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
  }

  /* 100dvh menos la suma de header+strip+barra-mapa+márgenes+botón+footer ≈ 350px */
  .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-footer     { padding: 14px 24px;  flex-shrink: 0; margin-top: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Móvil (≤ 520px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  /* Header */
  .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; }

  /* Strip */
  .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; }

  /* Mapa */
  .ft-mapa__header { font-size: 7px; padding: 5px 12px; gap: 6px; }

  /* 100dvh menos header(~48) + strip(~100) + barra-mapa(~20) +
     márgen-canvas(8) + botón(~36) + footer(~48) + buffer(12) ≈ 272px */
  .ft-mapa__canvas {
    height:     calc(100dvh - 272px);
    min-height: 150px;
    max-height: none;
    width:      calc(100% - 32px);
    margin:     8px 16px 0;
  }

  /* Botón */
  .ft-map-action   { padding: 7px 16px 0; justify-content: center; }
  .ft-map-btn      { font-size: 8px; padding: 9px 20px; letter-spacing: 0.13em; }

  /* Footer */
  .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-mapa NO crece — su tamaño lo da el canvas */
  .ft-mapa {
    flex:           none   !important;
    display:        flex   !important;
    flex-direction: column !important;
  }

  /* Alto en mm: anula height:720px sin depender de flex ni JS.
     193mm ≈ 730px; el resto de la página (~104mm) son header + strip +
     barra del mapa + márgenes + botón + footer.
     max-height:none anula el max-height:580px del breakpoint ≤860px
     que también se activa en impresión (794px < 860px). */
  .ft-mapa__canvas {
    height:     193mm !important;
    max-height: none  !important;
    min-height: none  !important;
    width:      calc(210mm - 88px) !important;
    margin:     14px 44px 4px !important;
  }

  /* El footer absorbe con margin-top:auto cualquier décima sobrante */
  .ft-footer {
    flex-shrink: 0    !important;
    margin-top:  auto !important;
  }

  /* Ocultar controles interactivos en PDF */
  .leaflet-control-zoom,
  .leaflet-control-container .ft-reset-btn {
    display: none !important;
  }
}