/* ===========================================================================
   EL MAPA DEL APELLIDO  ·  /surnames/{apellido}/map/

   La v1 era un tablero: un choropleth dentro de una caja, con la lista al lado.
   El owner lo rechazó con razón — «construí un tablero, no un mapa». Esto es
   otra cosa: el mapa ocupa la pantalla entera, se rota, se acerca y se desplaza,
   y los paneles FLOTAN encima y lo tapan. No hay marco.

   LO QUE MANTIENE, Y ES LO QUE GEOGEN NO TIENE
     · La frase que escribe el dato, arriba de todo. Se entiende sin leer nada más.
     · Ningún número sin su comparación.
     · El interruptor en palabras: concentración contra conteo crudo.
     · El selector de país dice cuáles tienen mapa y cuáles no.

   🔴 CUATRO REGLAS QUE NO SE PUEDEN SACAR

   1 · TODO cuelga de `#fc-sm`. Nada de `:root`, nada de selectores de elemento
       sueltos: esto convive con el tema.

   2 · La familia tipográfica se fuerza con `#fc-sm#fc-sm *`. El tema le mete
       Besley (serif) a `body.page:not(.home):not(.page-template-page-heritage-funnel)`
       — la excepción está escrita por NOMBRE, no por sistema, así que cualquier
       página nueva hereda el serif. Ya mordió en /surnames/.

   3 · ESTA PANTALLA NO LLEVA HEADER NI PIE. Decisión del owner (29-sep): el
       mapa ocupa la pantalla y nada más. Por eso tampoco carga home-v2.css:
       se cargaba SÓLO para el header transparente, y sin header no hace falta.
       La única salida es el enlace «Surname index» del panel de arriba.

   4 · `touch-action: none` en TODA la pantalla, no sólo en el lienzo. En
       teléfono el pellizco hacía zoom de la PÁGINA en vez del mapa —reportado
       por el owner— porque el gesto empezaba o terminaba sobre un panel.
   ======================================================================== */

/* ── la página es exactamente una pantalla, sin scroll ───────────────────
   ⚠️ `overflow:hidden` va en el body y no en `html`: en `html` rompe el
   `position:fixed` en iOS. */
body.fc-sm-page { overflow: hidden !important; height: 100%; overscroll-behavior: none; }
html:has(body.fc-sm-page) { height: 100%; }

/* 🔴 EL HEADER Y EL PIE NO EXISTEN ACÁ. */
body.fc-sm-page header.site-header,
body.fc-sm-page #masthead,
body.fc-sm-page .site-footer,
body.fc-sm-page footer.site-footer,
body.fc-sm-page .ast-scroll-to-top-wrapper,
body.fc-sm-page .entry-header,
body.fc-sm-page .ast-single-post-order,
body.fc-sm-page .post-navigation { display: none !important; }

body.fc-sm-page #content,
body.fc-sm-page .site-content,
body.fc-sm-page #primary,
body.fc-sm-page .entry-content { padding: 0 !important; margin: 0 !important; }

/* 🔴 EL PELLIZCO ES DEL MAPA, NO DE LA PÁGINA.
   Lo reportó el owner: en teléfono el zoom agrandaba toda la página. El lienzo
   ya tenía `touch-action:none`, pero el gesto que empieza sobre un panel —o que
   lo roza— lo agarra el navegador. Va en el body entero. El JS además frena los
   eventos `gesture*` de iOS, que ignoran `touch-action`. */
body.fc-sm-page,
body.fc-sm-page #fc-sm,
body.fc-sm-page #fc-sm * { touch-action: none; }
/* la excepción: lo único que se desplaza con el dedo es la lista y las sugerencias */
body.fc-sm-page #fc-sm .ranking ol,
body.fc-sm-page #fc-sm .sug { touch-action: pan-y; }

#fc-sm {
  /* los mismos tokens del sistema; copiados y no heredados a propósito, igual
     que en surnames.css: la página tiene que poder vivir si cambia el orden de
     carga de las hojas */
  --navy: #112B3D;
  --noche: #0A1922;
  --oro: #C9A84C;
  --oro-cl: #E8D08A;
  --tinta: #14232E;
  --tenue: #8D9AA4;
  --vidrio: rgba(10, 25, 34, .72);
  --borde: rgba(201, 168, 76, .22);
  --r: 3px;
  --pill: 100px;
  --sal: cubic-bezier(.23, 1, .32, 1);
}

/* 🔴 la familia, forzada — ver la regla 2 de la cabecera */
#fc-sm#fc-sm,
#fc-sm#fc-sm *:not(svg):not(path):not(circle):not(rect):not(g) {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
#fc-sm, #fc-sm *, #fc-sm *::before, #fc-sm *::after { box-sizing: border-box; }
#fc-sm {
  position: fixed; inset: 0; z-index: 0;
  background: var(--noche); color: #EDE7DC;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
#fc-sm button { font: inherit; color: inherit; box-shadow: none !important; }
#fc-sm :focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: var(--r); }
#fc-sm canvas { display: block; position: fixed; inset: 0; z-index: 0; cursor: grab; }
#fc-sm canvas.arrastrando { cursor: grabbing; }

/* ── los paneles flotan; no hay caja que contenga el mapa ─────────────── */
#fc-sm .capa {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
#fc-sm .capa > * { pointer-events: auto; }
#fc-sm .fila {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding: clamp(16px, 2.2vw, 30px);
}
#fc-sm .fila.abajo { align-items: flex-end; }
/* ⚠️ RED DE SEGURIDAD DEL ALTO: `.capa` reparte con space-between, así que si la
   suma no entra, el sobrante se va POR ABAJO y se come la línea de fuente. */
#fc-sm .fila.abajo { flex: 0 0 auto; }
#fc-sm .fila.arriba { flex: 0 1 auto; min-height: 0; }

#fc-sm .vidrio {
  background: var(--vidrio); border: 1px solid var(--borde); border-radius: 8px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
}

/* ── 1 · LA RESPUESTA EN PALABRAS ─────────────────────────────────────── */
#fc-sm .cabeza { max-width: min(440px, 44vw); }
#fc-sm .eye {
  display: flex; align-items: center; gap: 12px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin: 0 0 10px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
#fc-sm .eye::after { content: ""; flex: 0 1 60px; height: 1px; background: rgba(201, 168, 76, .4); }
#fc-sm #frase {
  font-size: clamp(22px, 1.7vw + 15px, 34px) !important; font-weight: 300; line-height: 1.16;
  letter-spacing: -.02em; color: #F6F1E8 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
  margin: 0; text-transform: none;
}
#fc-sm #frase b { font-weight: 700; color: var(--oro-cl); }
#fc-sm #frase .sub {
  display: block; margin-top: 12px; font-size: clamp(13.5px, .35vw + 12.5px, 16px);
  font-weight: 400; letter-spacing: 0; line-height: 1.5; color: #C3CBD2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
#fc-sm .cargando { color: #7E8C97; }

/* ── volver a la página del apellido («Back to X») ──────────────────────── */
/* 🔴 LA ÚNICA SALIDA DE LA PANTALLA, porque no hay header. No se esconde nunca. */
#fc-sm .volver {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
  padding: 6px 13px 6px 9px; border-radius: var(--pill);
  background: var(--vidrio); border: 1px solid var(--borde);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; letter-spacing: .04em; color: #C3CBD2; text-decoration: none !important;
  transition: color .18s var(--sal), border-color .18s var(--sal);
}
#fc-sm .volver:hover { color: var(--oro-cl); border-color: var(--oro); }
#fc-sm .volver svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* el buscador, dentro de la capa */
#fc-sm .busca { position: relative; margin-top: 18px; max-width: 330px; }
/* ⚠️ 16px y no 15: por debajo de eso iOS hace zoom al enfocar y descuadra toda
   la pantalla, que acá además no se puede volver a encuadrar scrolleando. */
#fc-sm .busca input {
  width: 100%; background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--pill);
  padding: 11px 18px; color: #F6F1E8; font: inherit; font-size: 16px; outline: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#fc-sm .busca input::placeholder { color: #7E8C97; }
#fc-sm .busca input:focus { border-color: var(--oro); }
#fc-sm .sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 240px; overflow-y: auto;
  border-radius: 8px; display: none; z-index: 9;
}
#fc-sm .sug.on { display: block; }
#fc-sm .sug button {
  display: flex; width: 100%; justify-content: space-between; gap: 10px; align-items: baseline;
  background: none; border: 0; border-bottom: 1px solid rgba(201, 168, 76, .12);
  padding: 9px 16px; cursor: pointer; text-align: left; font-size: 14px;
}
#fc-sm .sug button:last-child { border-bottom: 0; }
#fc-sm .sug button:hover, #fc-sm .sug button.sel { background: rgba(201, 168, 76, .13); }
#fc-sm .sug i { font-style: normal; color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── 2 · LA LISTA, flotando a la derecha ──────────────────────────────── */
/* ⚠️ El alto está acotado para que NO llegue a los controles de abajo a la
   derecha: el botón de los rótulos quedaba detrás y no se podía tocar. */
#fc-sm .ranking {
  position: fixed; right: clamp(16px, 2.2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 3;
  width: min(310px, 32vw); max-height: min(52vh, 470px); display: flex; flex-direction: column; overflow: hidden;
}
#fc-sm .ranking .cab {
  display: flex; justify-content: space-between; gap: 8px; padding: 13px 16px 10px;
  border-bottom: 1px solid var(--borde);
  font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--tenue);
}
#fc-sm .ranking ol { list-style: none; margin: 0; padding: 5px 0; overflow-y: auto; flex: 1; }
#fc-sm .ranking li { margin: 0; padding: 0; }
#fc-sm .ranking li button {
  width: 100%; display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  background: none; border: 0; padding: 7px 16px; cursor: pointer; text-align: left;
  transition: background .14s var(--sal);
}
#fc-sm .ranking li button:hover { background: rgba(201, 168, 76, .10); }
#fc-sm .ranking li button.sel { background: rgba(201, 168, 76, .2); }
#fc-sm .ranking .pos { font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
#fc-sm .ranking .nm { font-size: 13.5px; color: #EDE7DC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fc-sm .ranking .nm i { display: block; font-style: normal; font-size: 10.5px; color: var(--tenue); }
#fc-sm .ranking .vl {
  font-size: 13px; font-weight: 600; color: var(--oro-cl);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
/* 🔴 LA MARCA DE ULTRAMAR.
   Los departamentos de ultramar SÍ están en el dato y pueden encabezar el
   ranking —Boyer es primero en Reunión—, pero NO están dibujados en el mapa:
   están a 9.000 km. Sin decirlo, alguien lee «La Réunion, primera», mira el
   mapa y no encuentra nada encendido. La marca lo explica en una palabra. */
#fc-sm .ranking .fuera {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: var(--pill);
  border: 1px solid rgba(201, 168, 76, .35); background: rgba(201, 168, 76, .10);
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-cl);
  vertical-align: 1px;
}

/* ── 3 · EL INTERRUPTOR ───────────────────────────────────────────────── */
#fc-sm .pie-i { display: flex; flex-direction: column; align-items: flex-start; }
#fc-sm .modo { padding: 4px; display: flex; gap: 3px; border-radius: var(--pill); }
#fc-sm .modo button {
  border: 0; background: none; border-radius: var(--pill); padding: 8px 16px; cursor: pointer;
  font-size: 12.5px; color: var(--tenue); white-space: nowrap;
  transition: background .2s var(--sal), color .2s var(--sal);
}
#fc-sm .modo button[aria-pressed="true"] { background: var(--oro); color: var(--noche); font-weight: 600; }
#fc-sm .ayuda {
  margin: 9px 0 0; max-width: 330px; font-size: 11.5px !important; line-height: 1.5; color: #9FB0BC !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
#fc-sm .ayuda b { color: var(--oro-cl); }
/* 🔴 EN TÁCTIL ESTE RENGLÓN ES EL QUE MUESTRA LA REGIÓN TOCADA.
   Reemplaza al globo flotante, que en teléfono era un error: lo tapa el propio
   dedo, sale en un lugar distinto cada vez y no hay forma de cerrarlo. Acá está
   siempre en el mismo sitio, no tapa el mapa y se limpia solo. */
#fc-sm .ayuda .toca { color: var(--tenue); font-size: .92em; }

/* ── países ───────────────────────────────────────────────────────────── */
#fc-sm .paises {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: min(430px, 46vw);
}
#fc-sm .paises button {
  border: 1px solid var(--borde); background: var(--vidrio); border-radius: var(--pill);
  padding: 6px 13px; font-size: 12px; color: #C3CBD2; cursor: pointer;
  display: inline-flex; gap: 7px; align-items: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .18s var(--sal), color .18s var(--sal);
}
#fc-sm .paises button:hover:not(:disabled) { border-color: var(--oro); color: #fff; }
#fc-sm .paises button[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--noche); font-weight: 600; }
#fc-sm .paises button:disabled { opacity: .42; cursor: not-allowed; }
#fc-sm .paises .pt { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }

/* la leyenda y los controles */
#fc-sm .pie-d { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#fc-sm .leyenda {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  border-radius: var(--pill); font-size: 10.5px; color: var(--tenue);
}
#fc-sm .leyenda .barra { width: 100px; height: 7px; border-radius: var(--pill); }
#fc-sm .ctrl { display: flex; gap: 5px; }
#fc-sm .ctrl button {
  width: 34px; height: 34px; border: 1px solid var(--borde); background: var(--vidrio); border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; font-size: 15px; color: #C3CBD2; padding: 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .16s var(--sal), color .16s var(--sal);
}
#fc-sm .ctrl button.ancho { width: auto; padding: 0 14px; border-radius: var(--pill); font-size: 11.5px; letter-spacing: .04em; }
#fc-sm .ctrl button[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--noche); font-weight: 600; }
#fc-sm .ctrl button:hover { border-color: var(--oro); color: #fff; }

/* ── el minimapa, siempre con el norte arriba ─────────────────────────── */
/* ⚠️ Tiene que despejar el interruptor y su texto de ayuda, que ocupan los
   ~110 px de abajo a la izquierda. Apoyado más bajo, se pisaban. */
#fc-sm .mini {
  position: fixed; left: clamp(16px, 2.2vw, 30px); bottom: clamp(160px, 19vh, 210px); z-index: 4;
  width: 106px; padding: 8px 8px 5px; border-radius: 8px;
}
#fc-sm .mini svg { display: block; width: 100%; height: auto; }
#fc-sm .mini .n {
  position: absolute; top: 5px; right: 9px; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--oro); opacity: .8;
}
#fc-sm .mini path { fill: #20415A; stroke: #0A1922; stroke-width: .5; }
#fc-sm .mini path.act { fill: var(--oro); }
#fc-sm .mini .cono { fill: rgba(201, 168, 76, .22); stroke: var(--oro); stroke-width: .8; }

/* ── el globo del cursor ──────────────────────────────────────────────── */
#fc-sm #globo {
  position: fixed; z-index: 6; pointer-events: none; padding: 9px 13px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; opacity: 0; transform: translateY(5px); max-width: 230px;
  transition: opacity .15s var(--sal), transform .15s var(--sal);
}
#fc-sm #globo.on { opacity: 1; transform: none; }
#fc-sm #globo b { display: block; font-size: 13.5px; color: var(--oro-cl); margin-bottom: 2px; }
#fc-sm #globo s { display: block; text-decoration: none; color: #93A0AA; font-size: 11px; margin-top: 3px; }

/* la pista de uso, que se va sola */
#fc-sm #pista {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5;
  padding: 9px 18px; border-radius: var(--pill); font-size: 12px; color: #B9C4CC;
  white-space: nowrap; transition: opacity .6s var(--sal);
}
#fc-sm #pista.ido { opacity: 0; pointer-events: none; }

#fc-sm .fuente {
  font-size: 10.5px !important; color: #7E8C97 !important; max-width: min(430px, 46vw);
  text-align: right; line-height: 1.5; margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

/* el desplegable de países: sólo existe en teléfono */
#fc-sm .paises-caja { position: relative; }
#fc-sm .paises-abrir { display: none; }

/* los nombres de región sobre el mapa */
#fc-sm .rotulos { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#fc-sm .rotulos span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #EAF1F6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .25s var(--sal);
}
#fc-sm .rotulos.on span { opacity: .92; }

/* ── TELÉFONO ─────────────────────────────────────────────────────────────
   🔴 EL PROBLEMA DE ESTA PANTALLA EN TELÉFONO ES EL ALTO, NO EL ANCHO.
   Con el header fuera y sin botones de compartir quedan ~136 px más de mapa
   que en la primera versión. Aun así todo lo de abajo se compacta: el
   interruptor, la ayuda, los controles, la leyenda y la fuente tienen que
   entrar sin pisarse y sin empujar la fuente fuera de la pantalla. */
@media (max-width: 820px) {
  #fc-sm .cabeza { max-width: none; }
  /* la lista no cabe: en teléfono manda la frase y el mapa */
  #fc-sm .ranking { display: none; }
  /* ⚠️ El minimapa se OCULTA: no hay lugar y terminaba superpuesto al
     interruptor y a su texto. En escritorio es útil; acá estorba. */
  #fc-sm .mini { display: none; }
  #fc-sm .fila { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  #fc-sm .fila.abajo { gap: 10px; }
  #fc-sm .pie-i { align-items: stretch; }
  #fc-sm .pie-d { align-items: stretch; gap: 8px; }
  #fc-sm .leyenda { justify-content: center; }
  #fc-sm .ctrl { justify-content: center; }
  #fc-sm .ayuda { max-width: none; font-size: 11px !important; }
  #fc-sm .fuente { max-width: none; text-align: left; font-size: 10px !important; line-height: 1.45; }
  #fc-sm #pista { display: none; }
  #fc-sm .volver { margin-bottom: 10px; }
  #fc-sm .busca { margin-top: 14px; max-width: none; }

  #fc-sm .paises-caja { align-self: flex-start; }
  #fc-sm .paises-abrir {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borde);
    border-radius: var(--pill); padding: 7px 15px; font-size: 12.5px; color: #C3CBD2; cursor: pointer;
  }
  #fc-sm .paises {
    display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 9;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--vidrio); border: 1px solid var(--borde); border-radius: 8px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); min-width: 210px; overflow: hidden;
  }
  #fc-sm .paises.on { display: flex; }
  #fc-sm .paises button { border: 0; border-radius: 0; background: none; justify-content: space-between; padding: 10px 15px; }
  #fc-sm .paises button[aria-pressed="true"] { background: rgba(201, 168, 76, .22); color: #F3E3B4; }
}

/* pantallas bajas: primero se va la bajada del titular.
   🔴 EL RENGLÓN DE AYUDA YA NO SE OCULTA: en táctil es el único sitio donde se
   muestra el dato de la región tocada. Ocultarlo dejaba el toque sin respuesta,
   que es peor que perder la explicación del modo.
   La FUENTE tampoco se saca nunca: ningún número sin su fuente. */
@media (max-height: 700px) and (max-width: 820px) {
  #fc-sm #frase .sub { display: none; }
  #fc-sm .volver { margin-bottom: 8px; }
  #fc-sm .ayuda { font-size: 10.5px !important; }
}
@media (max-height: 600px) and (max-width: 820px) {
  #fc-sm #frase .sub { display: none; }
  #fc-sm .busca { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #fc-sm *, #fc-sm *::before, #fc-sm *::after { transition-duration: .01ms !important; }
}