.cat-municipal-viewer {
  margin: 2rem 0 0;
  overflow: hidden;
  border: 1px solid #cfc2ad;
  background: #fffdf8;
  box-shadow: 0 12px 34px rgb(20 63 77 / 8%);
}

.cat-municipal-viewer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .65fr);
  gap: 2rem;
  align-items: end;
  padding: 1.35rem clamp(1rem, 3vw, 2rem);
  background: #173f4d;
  color: #fffdf8;
}

.cat-municipal-viewer__head .cat-kicker { color: #f2c45d; }
.cat-municipal-viewer__head h3 { margin: .2rem 0 0; color: #fff; font: clamp(1.55rem, 3vw, 2.35rem) var(--cat-serif); }
.cat-municipal-viewer__head p { max-width: 52ch; margin: 0; color: #edf3f4; }
.cat-municipal-viewer [hidden] { display: none !important; }
.cat-municipal-viewer__skip { display: inline-block; margin: .55rem clamp(1rem, 3vw, 2rem); font-size: .87rem; }

.cat-municipal-viewer__shell {
  position: relative;
  isolation: isolate;
  border-block: 1px solid #d8cdbb;
  background: #e8e8e0;
}

.cat-municipal-viewer__map { height: min(66vh, 39rem); min-height: 30rem; background: #e8e8e0; }

.cat-map-toolbar {
  position: absolute;
  z-index: 1000;
  top: .8rem;
  right: .8rem;
  display: flex;
  gap: .35rem;
}

.cat-map-toolbar button {
  display: inline-flex;
  gap: .42rem;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem .72rem;
  border: 2px solid #173f4d;
  border-radius: 2px;
  background: #fffdf8;
  color: #173f4d;
  box-shadow: 0 3px 10px rgb(16 42 51 / 18%);
  font-weight: 800;
  cursor: pointer;
}

.cat-map-toolbar button:hover,
.cat-map-toolbar button[aria-expanded="true"],
.cat-map-toolbar button.is-active { background: #173f4d; color: #fff; }
.cat-map-toolbar button:disabled { border-color: #8b9294; background: #e8e6df; color: #5f6668; cursor: not-allowed; }

.cat-map-panel {
  position: absolute;
  z-index: 1100;
  top: 4rem;
  right: .8rem;
  width: min(22rem, calc(100% - 1.6rem));
  max-height: calc(100% - 5rem);
  overflow: auto;
  border: 2px solid #173f4d;
  background: #fffdf8;
  color: #173f4d;
  box-shadow: 0 12px 30px rgb(16 42 51 / 28%);
}

.cat-map-panel > header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 2.8rem;
  padding-left: .9rem;
  background: #173f4d;
  color: #fff;
}

.cat-map-panel > header button {
  width: 2.8rem;
  min-height: 2.8rem;
  border: 0;
  border-left: 1px solid #54727c;
  background: #173f4d;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.cat-map-panel > label,
.cat-map-panel [data-american-options] > label {
  display: grid;
  gap: .32rem;
  padding: .75rem .9rem;
  font-weight: 800;
}

.cat-map-panel select {
  width: 100%;
  min-height: 2.75rem;
  padding: .45rem .55rem;
  border: 1px solid #65767c;
  background: #fff;
  color: #102f3a;
}

.cat-map-panel [data-american-options] { border-top: 1px solid #d8cdbb; background: #f6ecd3; }
.cat-map-panel [data-american-options] p { margin: 0; padding: 0 .9rem .85rem; color: #553e20; }
.cat-map-panel [data-historical-options] { border-top: 1px solid #d8cdbb; background: #f6ecd3; }
.cat-map-panel [data-historical-options] > label { display: grid; gap: .32rem; padding: .75rem .9rem; font-weight: 800; }
.cat-map-panel [data-historical-options] p { margin: 0; padding: 0 .9rem .85rem; color: #44371f; }
.cat-map-panel__years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .8rem .9rem .2rem; }
.cat-map-panel__years label { display: grid; gap: .3rem; font-weight: 800; }
.cat-map-panel__range { border-top: 1px solid #e0d5c3; }
.cat-map-panel__range input { width: 100%; accent-color: #9f2234; }
.cat-map-panel__range output { color: #86172a; font-weight: 850; }
.cat-map-panel__presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: 0 .9rem .65rem; }
.cat-map-panel__presets button { min-height: 2.45rem; padding: .35rem; border: 1px solid #173f4d; background: #fff; color: #173f4d; font-size: .75rem; font-weight: 800; cursor: pointer; }
.cat-map-panel__presets button[aria-pressed="true"] { background: #173f4d; color: #fff; }
.cat-map-panel__direction { margin: 0; padding: .65rem .9rem; border-block: 1px solid #e0d5c3; background: #f6ecd3; color: #44371f; font-size: .78rem; line-height: 1.45; }
.cat-map-panel--layers { padding-bottom: .45rem; }
.cat-map-panel--layers > label { display: flex; grid-template-columns: none; gap: .55rem; align-items: center; min-height: 2.65rem; padding-block: .35rem; border-bottom: 1px solid #e8dfd0; cursor: pointer; }
.cat-map-panel input[type="checkbox"] { inline-size: 1.2rem; block-size: 1.2rem; accent-color: #9f2234; }

.cat-municipal-viewer__layer-states { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .9rem .85rem; }
.cat-municipal-viewer__layer-states span { padding: .28rem .5rem; border: 1px solid #65767c; background: #fff; color: #35484f; font-size: .76rem; font-weight: 750; }
.cat-municipal-viewer__layer-states [data-state="loading"] { border-color: #9b6500; color: #6d4800; }
.cat-municipal-viewer__layer-states [data-state="ready"] { border-color: #2d6e53; color: #20523e; }
.cat-municipal-viewer__layer-states [data-state="error"] { border-color: #9f2234; color: #86172a; background: #fff1f0; }

.cat-map-compare-divider {
  position: absolute;
  z-index: 900;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: #f2c45d;
  box-shadow: 0 0 0 1px #173f4d, 0 0 8px rgb(0 0 0 / 35%);
  cursor: ew-resize;
  touch-action: none;
}

.cat-map-compare-divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  border: 2px solid #173f4d;
  border-radius: 50%;
  background: #fffdf8;
  color: #173f4d;
  font-size: 1.25rem;
  font-weight: 900;
}

.cat-map-compare-labels { position: absolute; z-index: 850; top: 4.2rem; right: .8rem; left: .8rem; display: flex; justify-content: space-between; pointer-events: none; }
.cat-map-compare-labels span { padding: .3rem .55rem; border: 1px solid #173f4d; background: rgb(255 253 248 / 94%); color: #173f4d; font-weight: 850; box-shadow: 0 2px 5px rgb(0 0 0 / 16%); }
.cat-map-compare-labels span.is-hidden { opacity: 0; }

/* Control estándar Leaflet Side-by-Side: divisor real, visible y operable con teclado. */
.cat-municipal-viewer .leaflet-sbs-range {
  z-index: 920;
  margin: 0;
  cursor: ew-resize;
}
.cat-municipal-viewer .leaflet-sbs-range::-webkit-slider-thumb {
  width: 2.9rem;
  height: 2.9rem;
  border: 3px solid #173f4d;
  background-color: #fffdf8;
  box-shadow: 0 0 0 3px #f2c45d, 0 3px 10px rgb(0 0 0 / 35%);
}
.cat-municipal-viewer .leaflet-sbs-range::-moz-range-thumb {
  width: 2.45rem;
  height: 2.45rem;
  border: 3px solid #173f4d;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 0 0 3px #f2c45d, 0 3px 10px rgb(0 0 0 / 35%);
}
.cat-municipal-viewer .leaflet-sbs-divider {
  z-index: 915;
  width: 4px;
  background: #f2c45d;
  box-shadow: 0 0 0 1px #173f4d, 0 0 8px rgb(0 0 0 / 40%);
}
.cat-municipal-viewer .leaflet-sbs-range:focus-visible {
  outline: 4px solid #9f2234;
  outline-offset: 4px;
}

.cat-municipal-viewer__notice {
  position: absolute;
  z-index: 950;
  right: auto;
  bottom: 1.65rem;
  left: .8rem;
  max-width: min(42rem, calc(100% - 8rem));
  padding: .48rem .65rem;
  border-left: 4px solid #f2c45d;
  background: rgb(23 63 77 / 94%);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
}

/* Bug real senalado: Leaflet coloca su propio bloque de controles nativos
   (escala + zoom) en la esquina inferior izquierda por defecto, el mismo
   sitio donde vive .cat-municipal-viewer__notice de arriba -- y con
   z-index nativo mas alto que el del aviso (950), el boton "-" de zoom
   quedaba encima del texto. Se nota mas en modo Comparar, donde el aviso
   ocupa dos lineas. Se sube el bloque nativo por encima del hueco maximo
   que puede ocupar el aviso, en vez de competir por el mismo espacio. */
.cat-municipal-viewer .leaflet-bottom.leaflet-left {
  bottom: 4.85rem;
}

.cat-municipal-viewer__status { margin: 0; color: #fff; font-size: .82rem; }
.cat-municipal-viewer__alternative { padding: 1rem clamp(1rem, 3vw, 2rem); border-top: 1px solid #d8cdbb; font-size: .9rem; }
.cat-municipal-viewer__alternative p { margin: .2rem 0 .65rem; }

/* Rediseño con las piezas del catalogo aprobado: se retira el filete
   lateral dorado + degradado propio (identidad ad-hoc de este bloque, no
   compartida con nada mas del sitio) y se adopta el mismo lenguaje que
   el resto de tarjetas/fichas del catalogo -- fondo solido, borde,
   filete SUPERIOR dorado de 3px y sombra suave -- en vez de decidir cual
   de las variantes del sistema le tocaba a este bloque en concreto. */
.cat-place-toponymy {
  display: grid;
  grid-template-columns: minmax(8rem, .24fr) minmax(0, 1fr);
  gap: .25rem 1.5rem;
  align-items: start;
  margin: 1.25rem 0 0;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--cat-line);
  border-top: 3px solid var(--cat-gold);
  border-radius: 8px;
  background: var(--cat-surface);
  box-shadow: 0 2px 8px rgb(21 37 46 / 7%);
}

.cat-place-toponymy .cat-kicker,
.cat-place-toponymy h2 { grid-column: 1; }
/* Tamaño pedido explicitamente: 1.35rem quedaba demasiado grande en movil. */
.cat-place-toponymy h2 { margin: .1rem 0; color: var(--cat-blue-deep); font-size: 1rem; letter-spacing: .04em; }
.cat-place-toponymy > p:not(.cat-kicker) { grid-column: 2; max-width: 84ch; margin: .15rem 0; }
.cat-place-toponymy > details { grid-column: 2; max-width: 84ch; margin: .5rem 0 0; }
.cat-place-toponymy > details + details { margin-top: .75rem; }
.cat-place-toponymy__source { color: #594b3d; font-size: .86rem; }
#toponymy-title { scroll-margin-top: 6rem; }

.cat-municipal-viewer :focus-visible,
.cat-place-toponymy :focus-visible { outline: 3px solid #f2c45d; outline-offset: 3px; }
.cat-map-panel :focus-visible { outline-color: #9f2234; }

@media (max-width: 900px) {
  .cat-municipal-viewer__head { grid-template-columns: 1fr; }
  .cat-municipal-viewer__map { height: 34rem; }
}

@media (max-width: 620px) {
  .cat-municipal-viewer__map { min-height: 30rem; height: 70vh; }
  /* Bug real señalado: en 3 columnas, cada boton mide ~117px con borde
     grueso de 2px, y una etiqueta como "Fondo - Ortofoto 2023" partia en
     2 lineas apretadas dentro de una caja demasiado estrecha. Se pasa a
     2 columnas -- mas aire por boton -- y el tercero ocupa la fila
     completa. */
  .cat-map-toolbar { right: .45rem; left: .45rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .cat-map-toolbar button { justify-content: center; min-width: 0; padding: .5rem .5rem; font-size: .74rem; line-height: 1.25; text-align: center; }
  .cat-map-toolbar button:last-child { grid-column: 1 / -1; }
  .cat-map-toolbar button > span:first-child { display: none; }
  /* Bug real señalado: al pasar la barra a 2 columnas (arriba) con un
     tercer boton a fila completa, la barra paso a ocupar 2 filas en vez
     de 1, pero el panel que se abre encima seguia posicionado para 1 sola
     fila (top: 4.15rem) y quedaba superpuesto sobre el boton "Fondo" al
     abrir "Comparar" o "Capas". Subido a la altura real de las 2 filas. */
  .cat-map-panel { top: 7rem; right: .45rem; width: calc(100% - .9rem); max-height: calc(100% - 7.8rem); }
  .cat-map-panel__years { grid-template-columns: 1fr; }
  .cat-map-compare-labels { top: 7.05rem; right: .45rem; left: .45rem; }
  .cat-municipal-viewer__notice { right: .45rem; bottom: 1.8rem; left: .45rem; max-width: none; }
  /* Bug real medido en vivo: clamp(1rem,3vw,2rem) se resuelve a 1rem fijo
     por debajo de ~533px de ancho (3vw nunca llega a superar el minimo),
     asi que en movil este padding no se reducia nunca por si solo pese
     al clamp -- sumado al padding de .cat-place-compare (tambien
     reducido en ficha-lugar.css) el texto quedaba con solo ~286px de
     ancho util en un viewport de 375px. */
  .cat-municipal-viewer__alternative { padding: .75rem .6rem; }
  .cat-place-toponymy { grid-template-columns: 1fr; }
  .cat-place-toponymy .cat-kicker,
  .cat-place-toponymy h2,
  .cat-place-toponymy > p:not(.cat-kicker),
  .cat-place-toponymy > details { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-zoom-animated { transition: none !important; }
}