/* ══════════════════════════════════════════════════════════════════════════
   RÓTULOS DE CRISTAL · Mapa-Marca (Clotitec) · v1.0.0
   Pastilla de vidrio esmerilado con el nombre del punto y un dato opcional.

   Prefijo `mm-` a propósito: las clases genéricas (.rotulo, .pin, .label)
   chocan con las del proyecto anfitrión. No renombrar.

   Tonos: se adapta solo al fondo si el proyecto marca la base activa en el
   body → <body data-base="claro|satelite|oscuro"> y/o data-theme en <html>.
   ══════════════════════════════════════════════════════════════════════════ */

.rotulo-mm{
  display:flex; align-items:center; gap:7px;
  padding:3px 10px 3px 8px; border-radius:999px;
  min-height:0; height:auto; line-height:1.25;   /* el anfitrión puede forzar min-height:44px a todo <button> */
  white-space:nowrap; max-width:230px;
  background:rgb(255 255 255/.76);   /* 2026-08-27: mas opaco, se lee sobre cualquier fondo */
  border:1px solid rgb(255 255 255/.62);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:0 4px 18px rgb(26 26 26/.16), inset 0 1px 0 rgb(255 255 255/.5);
  font:600 12px/1.25 var(--mm-f-cuerpo, 'DM Sans', system-ui, sans-serif);
  color:var(--mm-tinta, #1A1A1A);
  text-shadow:0 1px 2px rgb(255 255 255/.55);
  cursor:pointer;
  transition:background 140ms, opacity 200ms linear;
  animation:mmEntra 320ms cubic-bezier(.16,1,.3,1) backwards;
}
.rotulo-mm:hover{ background:rgb(255 255 255/.92); }
.rotulo-mm .mm-punto{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 0 0 2px rgb(255 255 255/.65);
}
.rotulo-mm .mm-txt{ overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:40px; }

/* dato secundario (altitud, categoría…): filete, negrita y cifras tabulares
   para que se distinga del nombre sin necesidad de leerlo */
.rotulo-mm .mm-dato{
  flex:0 0 auto;
  font:800 11.5px/1.25 var(--mm-f-titulo, var(--mm-f-cuerpo, system-ui), sans-serif);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--mm-acento-txt, #0A6355);
  padding-left:7px; margin-left:1px; max-width:96px; overflow:hidden; text-overflow:ellipsis;
  border-left:1px solid rgb(26 26 26/.16);
}

/* !important a conciencia: MapLibre escribe opacity en el style EN LÍNEA de
   sus marcadores (desvanecido por oclusión del terreno) y sin esto el rótulo
   descartado se sigue viendo encima de los demás. */
.rotulo-mm.mm-oculto{
  opacity:0!important; pointer-events:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* NUNCA animar `transform` aquí: es la propiedad con la que MapLibre coloca
   sus marcadores, y la animación la pisa mientras dura (con `backwards`,
   también durante el retardo). El resultado es que todos los rótulos leen la
   misma posición, el reparto los da por solapados y sólo sobrevive uno. */
@keyframes mmEntra{ from{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .rotulo-mm{ animation:none; } }

/* ── cristal ahumado sobre ortofoto, noche o tema oscuro ── */
body[data-base="satelite"] .rotulo-mm,
body[data-base="oscuro"] .rotulo-mm,
html[data-theme="dark"] .rotulo-mm{
  background:rgb(16 24 21/.4);
  border-color:rgb(255 255 255/.24);
  color:var(--mm-tinta-inv, #F4F1EB);
  text-shadow:0 1px 3px rgb(0 0 0/.7);
  box-shadow:0 4px 20px rgb(0 0 0/.4), inset 0 1px 0 rgb(255 255 255/.14);
}
body[data-base="satelite"] .rotulo-mm:hover,
body[data-base="oscuro"] .rotulo-mm:hover,
html[data-theme="dark"] .rotulo-mm:hover{ background:rgb(16 24 21/.62); }

body[data-base="satelite"] .rotulo-mm .mm-punto,
body[data-base="oscuro"] .rotulo-mm .mm-punto,
html[data-theme="dark"] .rotulo-mm .mm-punto{ box-shadow:0 0 0 2px rgb(0 0 0/.3); }

body[data-base="satelite"] .rotulo-mm .mm-dato,
body[data-base="oscuro"] .rotulo-mm .mm-dato,
html[data-theme="dark"] .rotulo-mm .mm-dato{
  color:var(--mm-acento-txt-inv, #8FE0C6);
  border-left-color:rgb(255 255 255/.24);
}

/* ── variantes opcionales ── */
.rotulo-mm.mm-tenue{ font-weight:500; opacity:.92; }
.rotulo-mm.mm-tenue .mm-dato{ font-weight:700; color:var(--mm-tinta-2, #5F5F5F); }
body[data-base="satelite"] .rotulo-mm.mm-tenue .mm-dato,
body[data-base="oscuro"] .rotulo-mm.mm-tenue .mm-dato,
html[data-theme="dark"] .rotulo-mm.mm-tenue .mm-dato{ color:rgb(244 241 235/.72); }

@media (max-width:699px){
  .rotulo-mm{ font-size:11.5px; padding:3px 9px 3px 8px; max-width:180px; }
}

/* sin backdrop-filter no hay cristal: se compensa con opacidad */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .rotulo-mm{ background:rgb(255 255 255/.88); text-shadow:none; }
  body[data-base="satelite"] .rotulo-mm,
  body[data-base="oscuro"] .rotulo-mm,
  html[data-theme="dark"] .rotulo-mm{ background:rgb(16 24 21/.84); }
}
