/* The public map shell. Paused modules keep their own styles and implementations. */
@media (max-width: 39.99rem) {
  .live-city-modes {
    margin-inline: -10px;
    padding-inline: 10px;
  }
  .live-city-modes button {
    min-height: 38px;
    padding: 7px 13px;
    font-size: 13px;
  }
  .live-mode-switch button {
    font-size: 13px;
    white-space: nowrap;
  }
}
@media (max-width: 39.99rem) and (max-height: 50rem) {
  html[data-live-experience] .product-heading {
    display: none;
  }
  /* El tope de 42vh recortaba la fila de filtros en pantallas bajas: el botón
   * «Más filtros» quedaba fuera de la caja, invisible y sin posible toque. Los
   * controles se muestran enteros y el mapa conserva un piso visible; la barra
   * flotante de resultados ya respeta el borde inferior de los controles. */
  html[data-live-experience][data-discovery-view] .product-layout .map-stage {
    min-height: 9rem;
  }
}
@media (min-width: 68rem) {
  html[data-live-experience][data-discovery-view] #map-zone-status {
    max-width: min(28rem, 65%);
  }
  html[data-live-experience][data-discovery-view] .product-layout > main {
    overflow-y: auto;
  }
  html[data-live-experience][data-discovery-view] .product-layout .map-workspace {
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-areas: "controls controls" "results map";
    grid-template-rows: auto minmax(300px, 1fr);
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* Participation is part of the same map and place sheet. */
.live-conversation,
.live-activity-card,
.live-moderation {
  padding: 18px;
  margin-block: 16px;
  border: 1px solid var(--live-border, #dce5dd);
  border-radius: 16px;
  background: var(--live-surface, #fffef9);
  color: var(--live-ink, #183e37);
}
.live-conversation h3,
.live-conversation h4,
.live-activity-card h4 {
  margin: 0 0 10px;
}
.live-conversation p,
.live-activity-card p {
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.live-conversation__timing {
  color: var(--live-green, #206957);
  font-weight: 700;
}
.live-conversation label,
.live-activities label {
  display: grid;
  gap: 6px;
  margin-block: 12px;
  font-weight: 600;
}
.live-conversation input,
.live-conversation textarea,
.live-conversation select,
.live-activities input,
.live-activities textarea,
.live-activities select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--live-border-strong, #a3b9ac);
  border-radius: 9px;
  background: white;
  color: var(--live-ink, #183e37);
  font: inherit;
}
.live-activities input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  justify-self: start;
}
.live-conversation textarea,
.live-activities textarea {
  resize: vertical;
}
.live-conversation button,
.live-activities button,
.live-location-picker button {
  min-height: 44px;
  padding: 10px 14px;
  margin: 4px;
  border: 1px solid var(--live-border-strong, #a3b9ac);
  border-radius: 10px;
  background: var(--live-green-tint, #edf4ec);
  color: var(--live-ink, #183e37);
  font: inherit;
  cursor: pointer;
}
.live-conversation .primary-button,
.live-activities .primary-button {
  color: white;
  background: var(--live-green, #206957);
  border-color: var(--live-green, #206957);
}
.live-conversation fieldset,
.live-activities fieldset {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--live-border, #dce5dd);
  border-radius: 10px;
}
.live-conversation button:disabled,
.live-activities button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.live-messages {
  padding: 0;
  list-style: none;
}
.live-messages li {
  padding: 14px 0;
  border-bottom: 1px solid var(--live-border, #dce5dd);
  overflow-wrap: anywhere;
}
.live-messages time {
  display: block;
  font-size: 12px;
  color: var(--live-ink-mute, #52665e);
  margin-top: 4px;
}
.live-messages p {
  white-space: pre-wrap;
}
.live-question {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  background: var(--live-amber-tint, #fff0ca);
  border-radius: 6px;
}
.live-hint {
  font-size: 13px;
  color: var(--live-ink-mute, #52665e);
}
dialog.live-activities {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 24px));
  max-height: 90dvh;
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--live-border, #dce5dd);
  border-radius: 20px;
  background: var(--live-surface, #fffef9);
  color: var(--live-ink, #183e37);
}
.live-activities::backdrop {
  background: #16342dcc;
}
.live-activities > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-activities h2 {
  font-size: 24px;
  margin: 0;
}
.live-activities summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 700;
}
.live-activity-card a {
  overflow-wrap: anywhere;
  color: var(--live-green, #206957);
  text-decoration: underline;
}
.live-location-picker {
  position: absolute;
  bottom: 24px;
  left: 12px;
  right: 12px;
  z-index: 1600;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 12px;
  border-radius: 12px;
  background: var(--live-surface, #fffef9);
  box-shadow: 0 4px 24px #183e3733;
}
.live-location-picker p {
  margin: 0 0 8px;
}
#map[data-picking-location] {
  cursor: crosshair;
}
.live-city-modes {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 42px;
  padding-block: 9px 3px;
  -webkit-overflow-scrolling: touch;
}
.live-city-modes::-webkit-scrollbar {
  display: none;
}
/* El degradado del borde derecho avisa que la fila continúa. */
.live-city-modes {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
@supports not (mask-image: linear-gradient(to right, #000, transparent)) {
  .live-city-modes {
    -webkit-mask-image: none;
  }
}
.live-city-modes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--live-border, #e3e0d2);
  border-radius: var(--live-radius-sm, 10px);
  background: var(--live-surface, #fffdf7);
  color: var(--live-ink, #16332c);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--live-shadow-xs);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.live-city-modes button .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--live-green, #1d6151);
}
.live-city-modes button:hover:not([aria-pressed="true"]) {
  border-color: var(--live-green-line, #cbdccf);
  background: var(--live-green-tint, #e8f0e9);
}
.live-city-modes button[aria-pressed="true"] {
  background: var(--live-green, #1d6151);
  color: #fffdf7;
  border-color: var(--live-green, #1d6151);
  box-shadow: var(--live-shadow-sm);
}
.live-city-modes button[aria-pressed="true"] .icon {
  color: inherit;
}
/* Identidad por capa: cada puerta de ámbito lleva su color en el icono y en
 * el estado activo, así se reconoce el ámbito abierto sin leer el rótulo. */
html[data-live-experience] .live-city-modes [data-live-layer="public_service,information"] {
  --layer-accent: var(--live-bahia);
  --layer-strong: var(--live-bahia-strong);
  --layer-tint: var(--live-bahia-tint);
  --layer-line: var(--live-bahia-line);
}
html[data-live-experience] .live-city-modes [data-live-layer="commerce"] {
  --layer-accent: var(--live-coral);
  --layer-strong: var(--live-coral-strong);
  --layer-tint: var(--live-coral-tint);
  --layer-line: var(--live-coral-line);
}
html[data-live-experience] .live-city-modes [data-live-layer="services"] {
  --layer-accent: var(--live-green);
  --layer-strong: var(--live-green);
  --layer-tint: var(--live-green-tint);
  --layer-line: var(--live-green-line);
}
html[data-live-experience] .live-city-modes button .icon {
  color: var(--layer-accent, var(--live-green));
}
html[data-live-experience] .live-city-modes button:hover:not([aria-pressed="true"]) {
  border-color: var(--layer-line, var(--live-green-line));
  background: var(--layer-tint, var(--live-green-tint));
}
html[data-live-experience] .live-city-modes button[aria-pressed="true"] {
  background: var(--layer-strong, var(--live-green));
  border-color: var(--layer-strong, var(--live-green));
}
@media (max-width: 39.99rem) {
  dialog.live-activities {
    padding: 14px;
    max-height: 92dvh;
  }
  .live-conversation {
    padding: 12px;
    margin-inline: 0;
  }
  .live-activities h2 {
    font-size: 20px;
  }
  .live-conversation button {
    margin-inline: 0;
  }
}
/* Sistema visual del mapa vivo: MAREA. Azul marino como marca, coral como
 * acento de «lo que está pasando ahora», arena fría de lienzo. Los nombres
 * --live-* se conservan como alias para no tocar las decenas de consumidores;
 * la paleta canónica vive en --marea-*. */
html[data-live-experience] {
  /* Superficies: lienzo de arena fría, tarjetas blancas limpias. */
  --live-canvas: #e9eef3;
  --live-surface: #ffffff;
  --live-inset: #f2f6fa;
  --live-border: #d9e3ec;
  --live-border-soft: #e6edf4;
  --live-border-strong: #aec3d4;

  /* Tinta */
  --live-ink: #122a3d;
  --live-ink-soft: #47596b;
  --live-ink-mute: #647789;

  /* Marca: azul marino. */
  --marea-navy: #0f4c81;
  --marea-navy-strong: #0b3a63;
  --marea-navy-deep: #0a2a44;
  --marea-navy-tint: #e3edf6;
  --marea-navy-line: #b9d0e4;
  --live-green: var(--marea-navy);
  --live-green-deep: var(--marea-navy-deep);
  /* Sólo fondos: el «profundo» sirve también de tinta sobre claros, y de noche
   * se enciende; los fondos necesitan un valor que se mantenga oscuro. */
  --live-green-abyss: #0a2a44;
  --live-green-tint: var(--marea-navy-tint);
  --live-green-line: var(--marea-navy-line);

  /* Ahora: coral. El fuerte puntea (punto vivo, celda de la cinta); el
   * profundo sostiene textos pequeños con contraste suficiente. */
  --marea-coral: #e8552f;
  --marea-coral-strong: #c93f1d;
  --marea-coral-deep: #a83415;
  --marea-coral-tint: #fdeae3;
  --marea-coral-line: #f3c3b2;
  --live-amber: var(--marea-coral-deep);
  --live-amber-strong: var(--marea-coral);
  --live-amber-tint: var(--marea-coral-tint);
  --live-amber-line: var(--marea-coral-line);
  --live-amber-face: var(--marea-coral-strong);

  /* Aviso */
  --live-alert: #b91c1c;
  --live-alert-tint: #fee9e9;

  /* Identidad por capa de entrada. */
  --marea-sky: #0e7490;
  --marea-sky-strong: #0a5c73;
  --marea-sky-tint: #dff1f5;
  --marea-sky-line: #b2dde7;
  --live-bahia: var(--marea-sky);
  --live-bahia-strong: var(--marea-sky-strong);
  --live-bahia-tint: var(--marea-sky-tint);
  --live-bahia-line: var(--marea-sky-line);
  --marea-gold: #b45309;
  --marea-gold-tint: #fdf0d2;
  --marea-gold-line: #f0d79e;
  --live-coral: var(--marea-coral);
  --live-coral-strong: var(--marea-coral-strong);
  --live-coral-tint: var(--marea-coral-tint);
  --live-coral-line: var(--marea-coral-line);

  /* Elevación teñida de marino: sombras que pertenecen a la paleta, no grises. */
  --live-shadow-xs: 0 1px 2px rgb(18 42 61 / 8%);
  --live-shadow-sm: 0 2px 6px -1px rgb(18 42 61 / 11%), 0 1px 2px rgb(18 42 61 / 6%);
  --live-shadow-md: 0 10px 24px -10px rgb(18 42 61 / 25%), 0 2px 6px -3px rgb(18 42 61 / 12%);
  --live-shadow-lg: 0 24px 48px -20px rgb(18 42 61 / 38%);

  --live-radius-xs: 8px;
  --live-radius-sm: 10px;
  --live-radius-md: 14px;
  --live-radius-lg: 18px;
  --live-radius-xl: 22px;

  /* Serif para los pocos momentos grandes; el resto sigue en la sans del sistema. */
  --live-display: Georgia, "Noto Serif", "Times New Roman", serif;
}

/* Crepúsculo: el cromo se calienta un punto con el cielo. Arena tostada y
 * bordes dorados, tinta y acentos intactos; el cambio se siente como luz de
 * sol bajo, no como un tema nuevo. */
html[data-live-experience][data-daylight="amanecer"],
html[data-live-experience][data-daylight="atardecer"] {
  --live-canvas: #f2ece1;
  --live-surface: #fffcf5;
  --live-inset: #f6f0e3;
  --live-border: #e2d8c6;
  --live-border-soft: #ede5d3;
  --live-border-strong: #c9b99d;
}
html[data-live-experience][data-daylight="amanecer"] .product-layout.app-shell,
html[data-live-experience][data-daylight="atardecer"] .product-layout.app-shell {
  background:
    radial-gradient(120% 60% at 85% -10%, rgb(232 85 47 / 12%) 0%, transparent 55%),
    linear-gradient(180deg, #f6efe2 0%, var(--live-canvas) 45%, #e8dcc8 100%);
}

/* La noche baja el brillo de todo el cromo con las teselas: mismo mapa, otra
 * mirada. Se redefinen los primitivos --marea-* y las variables directas; los
 * alias --live-green/--live-amber/--live-bahia/--live-coral los siguen por
 * referencia perezosa sin tocar a los decenas de consumidores. Los acentos
 * (coral de «ahora», azul de marca) se aclaran para conservar contraste sobre
 * superficie oscura. La fase la fija daylight.js en <html data-daylight>. */
html[data-live-experience][data-daylight="noche"] {
  color-scheme: dark;

  /* Superficies: azul noche; la tarjeta apenas se separa del lienzo. */
  --live-canvas: #0b141d;
  --live-surface: #13202e;
  --live-inset: #0e1926;
  --live-border: #24384c;
  --live-border-soft: #1a2b3d;
  --live-border-strong: #3f5b76;

  /* Tinta: arena fría invertida. */
  --live-ink: #e9f1f7;
  --live-ink-soft: #a9bccd;
  --live-ink-mute: #7d93a6;

  /* Marca: el marino se enciende para leerse sobre fondo oscuro. */
  --marea-navy: #5b9fd6;
  --marea-navy-strong: #7cb4e0;
  --marea-navy-deep: #a8cdec;
  --marea-navy-tint: #17293b;
  --marea-navy-line: #2c4a68;

  /* Ahora: el coral mantiene su rol, un punto más luminoso. */
  --marea-coral: #ff6a3d;
  --marea-coral-strong: #ff8257;
  --marea-coral-deep: #ffa284;
  --marea-coral-tint: #30180f;
  --marea-coral-line: #5b2c1a;

  /* Aviso */
  --live-alert: #ff7a7a;
  --live-alert-tint: #33161a;

  /* Identidad por capa de entrada. */
  --marea-sky: #45b8d4;
  --marea-sky-strong: #67cbe2;
  --marea-sky-tint: #0e2530;
  --marea-sky-line: #1e4a5a;
  --marea-gold: #e5a53c;
  --marea-gold-tint: #2b2113;
  --marea-gold-line: #55401d;

  /* Los fondos «profundos» no se encienden de noche: con el celeste de
   * --marea-navy-deep el menú quedaba celeste con texto blanco (1,5:1). */
  --live-green-abyss: #0d1a27;

  /* Elevación nocturna: sombras negras, más densas. */
  --live-shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --live-shadow-sm: 0 2px 6px -1px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 35%);
  --live-shadow-md: 0 10px 24px -10px rgb(0 0 0 / 60%), 0 2px 6px -3px rgb(0 0 0 / 45%);
  --live-shadow-lg: 0 24px 48px -20px rgb(0 0 0 / 70%);
}
html[data-live-experience][data-daylight="noche"] .product-layout.app-shell {
  background:
    radial-gradient(120% 60% at 85% -10%, rgb(232 85 47 / 10%) 0%, transparent 55%),
    linear-gradient(180deg, #0b141d 0%, var(--live-canvas) 45%, #080e15 100%);
}
html[data-live-experience][data-daylight="noche"] .map-legend,
html[data-live-experience][data-daylight="noche"] #map-zone-status,
html[data-live-experience][data-daylight="noche"] .leaflet-control-attribution {
  background: rgb(13 24 36 / 90%);
}
html[data-live-experience][data-daylight="noche"] .legend-dot {
  box-shadow: 0 0 0 2px rgb(13 24 36 / 90%);
}
html[data-live-experience][data-daylight="noche"] .leaflet-control-zoom a {
  background: rgb(16 27 40 / 95%);
}
html[data-live-experience][data-daylight="noche"] .product-layout .map-canvas {
  background: #0a1219;
}
html[data-live-experience][data-daylight="noche"] .live-conversation input,
html[data-live-experience][data-daylight="noche"] .live-conversation textarea,
html[data-live-experience][data-daylight="noche"] .live-conversation select,
html[data-live-experience][data-daylight="noche"] .live-activities input,
html[data-live-experience][data-daylight="noche"] .live-activities textarea,
html[data-live-experience][data-daylight="noche"] .live-activities select {
  background: var(--live-inset);
}
html[data-live-experience] .product-layout.app-shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 85% -10%, rgb(232 85 47 / 6%) 0%, transparent 55%),
    linear-gradient(180deg, #f2f6fa 0%, var(--live-canvas) 45%, #dbe5ee 100%);
}
html[data-live-experience] .product-layout > .topbar,
html[data-live-experience] .product-layout > .network-banner,
html[data-live-experience] .product-layout > main {
  grid-column: 1;
}
html[data-live-experience] .product-layout > main {
  padding: 20px 24px 18px;
  min-height: 0;
  overflow: hidden;
}
html[data-live-experience] .product-layout > .product-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(330px, 88vw);
  height: 100dvh;
  grid-row: auto;
  transform: translateX(-105%);
  visibility: hidden;
  z-index: 2100;
  padding: 24px 16px;
}
html[data-live-experience] .product-layout > .product-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}
html[data-live-experience] .product-nav-shade:not([hidden]) {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
  border: 0;
  background: #112b366b;
}
html[data-live-experience] .product-nav__close,
html[data-live-experience] .product-menu-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  min-height: 44px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-md);
  background: var(--live-surface);
  color: var(--live-ink);
}
html[data-live-experience] .product-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding-inline: 11px;
  font-size: 14px;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease;
}
html[data-live-experience] .product-menu-toggle:hover {
  background: var(--live-green-tint);
  border-color: var(--live-green-line);
  color: var(--live-green-deep);
}
html[data-live-experience] .product-menu-toggle .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
@media (max-width: 39.99rem) {
  html[data-live-experience] .product-menu-toggle {
    width: 42px;
    padding-inline: 0;
    justify-content: center;
  }
  html[data-live-experience] .product-menu-toggle > span {
    display: none;
  }
}
html[data-live-experience] .product-nav__close {
  position: absolute;
  top: 12px;
  right: 12px;
}
html[data-live-experience] .product-brand {
  padding-right: 34px;
  margin-bottom: 16px;
}
html[data-live-experience] .product-brand strong {
  white-space: normal;
  font-family: var(--live-display);
  font-size: 23px;
  font-weight: 400;
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
}
/* Cajón de navegación: verde profundo, con una sola jerarquía de etiquetas. */
html[data-live-experience] .product-nav {
  padding: 22px 14px 18px;
  background: var(--live-green-abyss);
  border-right: 0;
  box-shadow: var(--live-shadow-lg);
}
html[data-live-experience] .product-brand > .icon {
  width: 36px;
  height: 36px;
  padding: 7px;
  border: 1px solid rgb(255 253 247 / 24%);
  border-radius: var(--live-radius-sm);
  background: rgb(255 253 247 / 8%);
}
html[data-live-experience] .product-brand small {
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgb(255 253 247 / 62%);
}
html[data-live-experience] [data-live-activities-menu] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid rgb(255 253 247 / 26%);
  border-radius: var(--live-radius-sm);
  background: rgb(255 253 247 / 9%);
  color: #fffdf7;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
  transition: background 140ms ease, border-color 140ms ease;
}
html[data-live-experience] [data-live-activities-menu] .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.85;
}
html[data-live-experience] [data-live-activities-menu]:hover {
  border-color: rgb(255 253 247 / 42%);
  background: rgb(255 253 247 / 16%);
}
html[data-live-experience] .product-nav__label {
  margin: 16px 10px 8px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgb(255 253 247 / 55%);
}
html[data-live-experience] .product-nav__links button {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--live-radius-sm);
  font-size: 14px;
  transition: background 140ms ease, color 140ms ease;
}
html[data-live-experience] .product-nav__links button .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.8;
}
html[data-live-experience] .product-nav__links button:hover:not(:disabled) {
  background: rgb(255 253 247 / 10%);
}
html[data-live-experience] .product-nav__links button[aria-current="page"] {
  background: var(--live-surface);
  color: var(--live-green-deep);
  font-weight: 650;
}
html[data-live-experience] .product-nav__links button[aria-current="page"] .icon {
  opacity: 1;
  color: var(--live-green);
}
html[data-live-experience] .product-nav__close {
  border-color: rgb(255 253 247 / 24%);
  background: rgb(255 253 247 / 10%);
  color: #fffdf7;
}
html[data-live-experience] .product-presentation-link {
  color: rgb(255 253 247 / 78%);
}
/* Barra inferior del teléfono: mismo peso para los cuatro destinos. */
html[data-live-experience] .product-layout .mobile-dock {
  padding: 5px 8px max(5px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--live-border);
  background: var(--live-surface);
  box-shadow: 0 -2px 10px -6px rgb(20 50 43 / 22%);
}
html[data-live-experience] .product-layout .mobile-dock > * {
  gap: 3px;
  min-height: 50px;
  border-radius: var(--live-radius-sm);
  color: var(--live-ink-soft);
  font-size: 11px;
  font-weight: 600;
}
html[data-live-experience] .product-layout .mobile-dock .icon {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
html[data-live-experience] .product-layout .mobile-dock__search-icon {
  display: inline-flex;
  color: inherit;
}
html[data-live-experience] .product-layout .mobile-dock__search {
  color: var(--live-ink-soft) !important;
}
html[data-live-experience] .product-layout .mobile-dock > [aria-pressed="true"] {
  color: var(--live-green-deep);
  background: var(--live-green-tint);
}
html[data-live-experience] .product-layout .mobile-dock > :disabled {
  opacity: 0.45;
}
html[data-live-experience] .map-marker--event.map-marker--state-active .map-marker__pin {
  background: #c93f1d;
  color: white;
  outline: 3px solid #f3c3b2;
}
html[data-live-experience] .map-marker--event.map-marker--state-closing .map-marker__pin {
  background: #b45309;
  color: white;
}
html[data-live-experience] .map-marker--event.map-marker--state-closed .map-marker__pin {
  background: #647789;
  color: white;
}
.live-presence {
  padding-block: 12px;
  border-block: 1px solid var(--live-border);
}
.live-presence__list {
  padding: 0;
  list-style: none;
}
.live-presence__list li {
  display: grid;
  gap: 6px;
  padding-block: 10px;
}
.live-presence fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.live-presence button[aria-pressed="true"] {
  background: #e3edf6;
  border-color: #0f4c81;
}
html[data-live-experience] .product-topbar.topbar {
  min-height: 64px;
  padding: 10px 24px;
  gap: 14px;
  background: var(--live-surface);
  border-bottom: 1px solid var(--live-border);
  box-shadow: var(--live-shadow-xs);
}
html[data-live-experience] .product-territory .sector-control > .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--live-green);
}
html[data-live-experience] .product-territory .sector-control select {
  min-height: 40px;
  /* 16px es el mínimo: por debajo, Safari en iPhone hace zoom al enfocar el campo
     y descuadra la pantalla. Lo exige e2e-mobile-readiness. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--live-ink);
}
html[data-live-experience] .product-help,
html[data-live-experience] .product-account,
html[data-live-experience] .product-notifications,
html[data-live-experience] .product-topbar .simple-toggle {
  color: var(--live-ink-soft);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
html[data-live-experience] .product-account,
html[data-live-experience] .product-notifications,
html[data-live-experience] .product-topbar .simple-toggle {
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-sm);
  background: var(--live-inset);
  box-shadow: none;
}
html[data-live-experience] .product-help:hover,
html[data-live-experience] .product-account:hover,
html[data-live-experience] .product-notifications:hover,
html[data-live-experience] .product-topbar .simple-toggle:hover {
  color: var(--live-green);
  background: var(--live-green-tint);
  border-color: var(--live-green-line);
}
html[data-live-experience] .product-territory {
  flex-basis: 235px;
}
html[data-live-experience] .product-search .map-search {
  min-height: 44px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-md);
  background: var(--live-inset);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
html[data-live-experience] .product-search .map-search:focus-within {
  border-color: var(--live-green-line);
  background: var(--live-surface);
  box-shadow: var(--live-shadow-sm);
}
html[data-live-experience] .product-search .map-search > .icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--live-ink-mute);
}
html[data-live-experience] .product-search .map-search input {
  height: 42px;
  /* Mismo mínimo que el filtro de sector: 16px evita el zoom de Safari al enfocar. */
  font-size: 16px;
}
html[data-live-experience] .product-search .map-search input::placeholder {
  color: var(--live-ink-mute);
}
html[data-live-experience] .product-search .map-search__submit {
  border-radius: var(--live-radius-xs);
  background: var(--live-green);
  color: #fffdf7;
}
html[data-live-experience] .product-search .map-search__submit:hover {
  background: var(--live-green-abyss);
}
html[data-live-experience] .product-heading {
  margin-bottom: 16px;
  align-items: center;
}
html[data-live-experience] .product-heading h1 {
  font: 400 clamp(24px, 2.5vw, 33px) / 1.2 var(--live-display);
  letter-spacing: -0.2px;
  color: var(--live-ink);
  overflow-wrap: anywhere;
}
/* «miércoles, 16 de septiembre»: en español sólo va en mayúscula la primera letra. */
html[data-live-experience] .product-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.3px;
  color: var(--live-ink-soft);
  margin-bottom: 7px;
}
html[data-live-experience] .product-heading .eyebrow [data-live-date]::first-letter {
  text-transform: uppercase;
}
html[data-live-experience] .product-heading [data-page-action] {
  display: inline;
}
.live-description {
  margin: 6px 0 0;
  max-width: 52ch;
  color: var(--live-ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
html[data-live-experience] .product-heading__actions {
  padding: 0;
  background: none;
  border: 0;
  gap: 8px;
}
html[data-live-experience] .product-heading__actions button {
  min-height: 42px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-sm);
  padding: 9px 15px;
  background: var(--live-surface);
  color: var(--live-ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--live-shadow-xs);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
html[data-live-experience] .product-heading__actions button .icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--live-green);
}
html[data-live-experience] .product-heading__actions button:hover:not(:disabled) {
  border-color: var(--live-green-line);
  background: var(--live-green-tint);
  box-shadow: var(--live-shadow-sm);
}
html[data-live-experience] .product-heading__actions [data-product-action="publish"] {
  background: var(--live-green);
  color: white;
  border-color: var(--live-green);
}
html[data-live-experience] .product-heading__actions button:disabled {
  opacity: 0.55;
}
/* La ficha de capa activa se pinta con el color de su familia, el mismo del pin. Así
 * la fila de filtros enseña el código de color en vez de repetir verde. */
html[data-live-experience] #browse-controls .topic-button[aria-pressed="true"] {
  --chip: var(--live-green);
  --chip-tinte: var(--live-green-tint);
  border-color: color-mix(in srgb, var(--chip) 34%, transparent);
  background: var(--chip-tinte);
  color: var(--chip);
}
html[data-live-experience] #browse-controls .topic-button[aria-pressed="true"] .icon {
  color: var(--chip);
  opacity: 1;
}
html[data-live-experience] #browse-controls [data-map-layer="commerce"][aria-pressed="true"] {
  --chip: #a83415;
  --chip-tinte: #fdeae3;
}
html[data-live-experience] #browse-controls [data-map-layer="services"][aria-pressed="true"] {
  --chip: #0f4c81;
  --chip-tinte: #e3edf6;
}
html[data-live-experience] #browse-controls [data-map-layer="tourism"][aria-pressed="true"] {
  --chip: #6d5ba8;
  --chip-tinte: #ece9f7;
}
html[data-live-experience] #browse-controls [data-map-layer="public_service"][aria-pressed="true"],
html[data-live-experience] #browse-controls [data-map-layer="information"][aria-pressed="true"] {
  --chip: #0e7490;
  --chip-tinte: #dff1f5;
}
html[data-live-experience] #browse-controls [data-map-layer="event"][aria-pressed="true"],
html[data-live-experience] #browse-controls [data-map-layer="community"][aria-pressed="true"] {
  --chip: #c93f1d;
  --chip-tinte: #fdeae3;
}

/* 3· El panel de controles deja de ser la misma losa blanca que la lista. */
html[data-live-experience] .product-layout #browse-controls {
  background: linear-gradient(var(--live-surface), var(--live-inset));
  border-bottom: 1px solid var(--live-border);
}

/* ——— Jerarquía de la pantalla principal ———
 *
 * Tres problemas medidos: el titular gastaba 91 px sin dar un dato, las dos filas de
 * ámbito competían —«Información útil» aparecía dos veces seguidas— y la cabecera de
 * resultados usaba cuatro líneas para decir dos cosas. La cinta ya trae el dato; el
 * resto del cromo cede sitio y se ordena por peso. */

/* 1· El titular deja de ser el protagonista: lo es la cinta que va debajo. */
html[data-live-experience] .product-heading {
  margin-bottom: 10px;
}
html[data-live-experience] .product-heading h1 {
  font-size: clamp(21px, 1.9vw, 26px);
}
html[data-live-experience] .product-heading .eyebrow {
  margin-bottom: 4px;
}
html[data-live-experience] .live-description {
  display: none;
}

/* 2· Los tres ámbitos mandan; las capas quedan como filtro, no como segunda fila de
 * botones que repite sus nombres. */
html[data-live-experience] .live-city-modes {
  padding-block: 10px 6px;
}
html[data-live-experience] .live-city-modes button {
  min-height: 42px;
  font-size: 14px;
}
html[data-live-experience] .product-filter-bar {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #browse-controls .topic-button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: var(--live-radius-xs);
}
html[data-live-experience] #browse-controls .topic-button .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
html[data-live-experience] .product-more-filters {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
}

/* 3· La cabecera de resultados: un solo bloque. El título dice qué y dónde;
 * el contador vive en la misma fila, a la derecha; la línea de contexto sólo
 * aparece cuando aporta algo que los controles no muestran ya. */
html[data-live-experience] #results-panel .panel-heading {
  margin-bottom: 8px;
}
html[data-live-experience] #results-title {
  font: 400 21px/1.25 var(--live-display);
  letter-spacing: -0.1px;
  color: var(--live-ink);
}
html[data-live-experience] .panel-heading__side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding-top: 2px;
}
html[data-live-experience] #result-summary {
  margin: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--live-ink-soft);
}
html[data-live-experience] .results-intro {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--live-ink-soft);
}
html[data-live-experience] .results-intro:empty {
  display: none;
}

/* La cinta de hoy ocupa el sitio que antes gastaba un titular de relleno. Sólo
 * aparecen las celdas con dato: una celda vacía pesa más que su ausencia. */
.today-strip {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 1px;
  margin-bottom: 14px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-md);
  background: var(--live-surface);
  box-shadow: var(--live-shadow-xs);
  overflow: hidden;
}
.today-strip[hidden] {
  display: none;
}
.today-cell {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 22rem;
  border-right: 1px solid var(--live-border);
  flex-direction: column;
  gap: 2px;
  padding: 9px 16px;
  background: var(--live-surface);
}
.today-cell:last-child {
  border-right: 0;
}
.today-cell__k {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
}
.today-cell__k .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}
.today-cell__v {
  margin: 0;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.25;
  color: var(--live-ink);
  overflow-wrap: anywhere;
}
.today-cell__v a {
  color: inherit;
  text-decoration: none;
}
.today-cell__v a:hover {
  text-decoration: underline;
}
.today-cell__v small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--live-ink-soft);
}
/* Atribución exigida por la licencia del proveedor del clima: nombre enlazado
 * a la fuente y licencia, siempre visible junto al dato. */
.today-cell__src {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--live-ink-soft);
}
.today-cell__src[hidden] {
  display: none;
}
.today-cell__src a {
  color: inherit;
  text-decoration: none;
}
.today-cell__src a:hover {
  text-decoration: underline;
}
/* La celda viva lleva el ámbar reservado a lo que ocurre ahora. */
.today-cell--live {
  background: var(--live-amber-tint);
}
.today-cell--live .today-cell__k {
  color: var(--live-amber);
}
@media (max-width: 39.99rem) {
  .today-strip {
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .today-strip::-webkit-scrollbar {
    display: none;
  }
  .today-cell {
    flex: 0 0 auto;
    max-width: 16rem;
    padding: 7px 12px;
  }
  .today-cell__v {
    font-size: 14px;
    white-space: nowrap;
  }
  .today-cell__v small {
    white-space: nowrap;
  }
  .today-cell__src {
    white-space: nowrap;
  }
}

html[data-live-experience] .map-workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-xl);
  background: var(--live-surface);
  box-shadow: var(--live-shadow-md);
}
html[data-live-experience] .product-layout #browse-controls {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 0;
  /* Sin tope de altura: los topes previos (42vh, 36vh, 18vh) recortaban la fila
   * de filtros en pantallas bajas y «Más filtros» quedaba fuera de la caja,
   * invisible. Los controles se muestran enteros; el mapa conserva su piso
   * (min-height en .map-stage) y la barra flotante respeta el borde inferior
   * de los controles (--browse-height). */
  max-height: none;
  overflow: auto;
  padding: 11px 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--live-border);
  border-radius: var(--live-radius-xl) var(--live-radius-xl) 0 0;
  background: linear-gradient(var(--live-surface), var(--live-inset));
}
html[data-live-experience] .product-layout #browse-controls .category-menu__popover {
  position: fixed;
  inset: 8rem 1rem auto auto;
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(28rem, calc(100dvh - 9rem));
  overflow: auto;
  z-index: 1800;
}
.live-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.live-mode-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--live-inset, #f4f2e9);
  border: 1px solid var(--live-border-soft, #edeade);
  border-radius: var(--live-radius-sm, 10px);
  flex: none;
}
.live-mode-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 15px;
  color: var(--live-ink-soft, #55675e);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
.live-mode-switch button:hover:not([aria-pressed="true"]) {
  color: var(--live-ink, #16332c);
}
.live-mode-switch button[aria-pressed="true"] {
  background: var(--live-surface, #fffdf7);
  color: var(--live-ink, #16332c);
  box-shadow: var(--live-shadow-xs);
  border-color: var(--live-border, #e3e0d2);
}
/* El punto ámbar es la única señal de «ahora»: se reserva para eso y late despacio. */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-amber-strong, #e8552f);
  box-shadow: 0 0 0 3px rgb(232 85 47 / 20%);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .live-mode-switch button[aria-pressed="true"] .live-dot {
    animation: live-dot-pulse 2.8s ease-in-out infinite;
  }
}
@keyframes live-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgb(232 85 47 / 20%);
  }
  50% {
    box-shadow: 0 0 0 5px rgb(232 85 47 / 8%);
  }
}
.live-status {
  font-size: 12px;
  color: var(--live-ink-mute, #7a8a80);
  margin-left: auto;
  text-align: right;
}
.live-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--live-border-soft, #edeade);
  border-radius: var(--live-radius-xs, 8px);
  color: var(--live-ink-soft, #55675e);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.live-refresh:hover {
  color: var(--live-green, #1d6151);
  background: var(--live-green-tint, #e8f0e9);
  border-color: var(--live-green-line, #cbdccf);
}
.live-refresh .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
html[data-live-experience] .product-filter-bar {
  margin-top: 9px;
  gap: 8px;
}
html[data-live-experience] .product-layout #browse-controls .topic-button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--live-radius-xs);
  background: transparent;
  color: var(--live-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
html[data-live-experience] .product-layout #browse-controls .topic-button .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.85;
}
html[data-live-experience] .product-layout #browse-controls .topic-button:hover {
  background: var(--live-inset);
  color: var(--live-ink);
}
html[data-live-experience] .product-layout #browse-controls .topic-button[aria-pressed="true"] {
  background: var(--live-green-tint);
  border-color: var(--live-green-line);
  color: var(--live-green-deep);
  box-shadow: none;
}
html[data-live-experience] .product-more-filters {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--live-border-soft);
  border-radius: var(--live-radius-xs);
  color: var(--live-ink-soft);
  font-size: 12.5px;
}
html[data-live-experience] .product-more-filters .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
html[data-live-experience] .product-more-filters:hover {
  color: var(--live-green);
  background: var(--live-green-tint);
  border-color: var(--live-green-line);
}
html[data-live-experience][data-live-mode="today"] .product-filter-bar,
html[data-live-experience][data-live-mode="today"] .product-extra-filters {
  display: none;
}
html[data-live-experience] .product-layout #browse-controls .layer-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
html[data-live-experience] .layer-tabs > button {
  flex-shrink: 0;
  white-space: nowrap;
}
html[data-live-experience] .product-layout .browse-view-controls {
  display: none;
}
html[data-live-experience][data-discovery-view] .product-layout #map-panel {
  display: block !important;
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  visibility: visible;
}
html[data-live-experience][data-discovery-view] .product-layout #results-panel {
  display: block !important;
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  padding: 18px 16px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--live-border);
  border-radius: 0;
  background: var(--live-surface);
  visibility: visible;
}
html[data-live-experience] .panel-heading {
  align-items: flex-start;
  gap: 8px;
}
html[data-live-experience] #results-panel .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
  margin-bottom: 6px;
}
html[data-live-experience] #results-panel .trust-cue {
  display: none;
}
html[data-live-experience] .product-layout #catalog-results {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
html[data-live-experience] .catalog-card {
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-md);
  overflow: hidden;
  background: var(--live-surface);
  box-shadow: var(--live-shadow-xs);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
html[data-live-experience] .catalog-card:hover {
  border-color: var(--live-green-line);
  box-shadow: var(--live-shadow-sm);
}
html[data-live-experience] .catalog-card__button {
  padding: 14px;
  gap: 9px;
}
html[data-live-experience] .catalog-card__title {
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--live-ink);
}
html[data-live-experience] .catalog-card__summary {
  line-height: 1.55;
  font-size: 13px;
  color: var(--live-ink-soft);
}
html[data-live-experience] .catalog-card__meta {
  font-size: 12px;
  color: var(--live-ink-mute);
}
html[data-live-experience] .catalog-card__meta {
  line-height: 1.5;
}
/* Ficha de lista: icono, procedencia, tipo, nombre, resumen y datos, en ese orden.
 * Las insignias pasan de pastillas rellenas a fichas con filo y punto de color: a 10 px
 * el borde es lo que separa «Fuente oficial» de «Ejemplo · no vigente» de un vistazo. */
html[data-live-experience] .catalog-card__button {
  min-height: 0;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 13px;
  gap: 4px 11px;
}
html[data-live-experience] .catalog-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border-radius: var(--live-radius-sm);
  border: 1px solid var(--live-green-line);
  background: var(--live-green-tint);
  color: var(--live-green);
}
html[data-live-experience] .catalog-card__icon .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
html[data-live-experience] .catalog-card__icon--business {
  border-color: #b9d0e4;
  background: #e3edf6;
  color: #0f4c81;
}
html[data-live-experience] .catalog-card__icon--community {
  border-color: #f3c3b2;
  background: #fdeae3;
  color: #a83415;
}
html[data-live-experience] .catalog-card__icon--places,
html[data-live-experience] .catalog-card__icon--events {
  border-color: var(--live-amber-line);
  background: var(--live-amber-tint);
  color: var(--live-amber);
}
html[data-live-experience] .catalog-card__badges {
  gap: 5px;
  margin-bottom: 1px;
}
html[data-live-experience] .source-badge,
html[data-live-experience] .state-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
  padding: 2px 8px 2px 7px;
  border: 1px solid var(--live-border);
  border-radius: 999px;
  background: transparent;
  color: var(--live-ink-soft);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
html[data-live-experience] .source-badge::before,
html[data-live-experience] .state-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentcolor;
}
html[data-live-experience] .source-badge--official,
html[data-live-experience] .source-badge--institution {
  border-color: #b2dde7;
  background: #dff1f5;
  color: #0a5c73;
}
html[data-live-experience] .source-badge--business,
html[data-live-experience] .state-badge--current,
html[data-live-experience] .state-badge--open,
html[data-live-experience] .state-badge--verified,
html[data-live-experience] .state-badge--available {
  border-color: var(--live-green-line);
  background: var(--live-green-tint);
  color: #0b3a63;
}
html[data-live-experience] .source-badge--community {
  border-color: #f3c3b2;
  background: #fdeae3;
  color: #c93f1d;
}
html[data-live-experience] .source-badge--sample,
html[data-live-experience] .source-badge--draft,
html[data-live-experience] .state-badge--sample,
html[data-live-experience] .state-badge--unverified,
html[data-live-experience] .state-badge--pending,
html[data-live-experience] .state-badge--unknown {
  border-color: var(--live-amber-line);
  background: var(--live-amber-tint);
  color: #a83415;
}
html[data-live-experience] .state-badge--closed,
html[data-live-experience] .state-badge--expired,
html[data-live-experience] .state-badge--alert {
  border-color: #f0cec2;
  background: var(--live-alert-tint);
  color: var(--live-alert);
}
/* El primer «meta» es el tipo de ficha; el segundo son los datos rápidos. */
html[data-live-experience] #catalog-results .catalog-card__meta {
  gap: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
  line-height: 1.4;
}
html[data-live-experience] #catalog-results .catalog-card__meta:has(strong) {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--live-ink-soft);
}
html[data-live-experience] #catalog-results .catalog-card__meta strong {
  font-weight: 600;
  color: var(--live-ink-mute);
}
html[data-live-experience] #catalog-results .catalog-card__cta {
  margin-top: 8px;
  color: var(--live-green);
  font-size: 12.5px;
  font-weight: 700;
}
html[data-live-experience] #catalog-results .catalog-card__cta::after {
  content: " →";
}
/* La fotografía del lugar estaba apagada en la lista (app.css:6418). El proyecto
 * guarda nueve fotos reales de la comuna y no se veía ninguna. Vuelve como cabecera
 * de la tarjeta, a sangre, conservando el pie con su procedencia: una foto sin
 * fuente sería exactamente lo que este producto no hace. */
html[data-live-experience] #catalog-results .catalog-card > .place-photo {
  display: block;
  margin: 0;
  border-radius: var(--live-radius-md) var(--live-radius-md) 0 0;
  background: var(--live-inset);
}
html[data-live-experience] #catalog-results .catalog-card > .place-photo img {
  height: 9.5rem;
  object-fit: cover;
}
html[data-live-experience] #catalog-results .catalog-card > .place-photo figcaption {
  display: block;
  padding: 6px 14px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--live-ink-mute);
}
html[data-live-experience] #catalog-results .catalog-card > .place-photo a {
  color: var(--live-ink-soft);
}
html[data-live-experience] #catalog-results .catalog-card > .place-photo figcaption small {
  font-size: 11px;
}
html[data-live-experience] #catalog-results .catalog-card:has(> .place-photo) .catalog-card__button {
  padding-top: 11px;
}

/* Marcadores: una familia de color por capa, con el icono siempre encima. El color
 * agrupa, el icono distingue; ninguno de los dos va solo. */
html[data-live-experience] .map-marker__pin,
html[data-live-experience] .map-marker__cluster {
  border: 2px solid rgb(255 253 247 / 92%);
  box-shadow: var(--live-shadow-md);
}
html[data-live-experience] .map-marker--public_service .map-marker__pin,
html[data-live-experience] .map-marker--public_service .map-marker__cluster,
html[data-live-experience] .map-marker--citizen .map-marker__pin,
html[data-live-experience] .map-marker--citizen .map-marker__cluster {
  background: #0a5c73;
}
html[data-live-experience] .map-marker--commerce .map-marker__pin,
html[data-live-experience] .map-marker--commerce .map-marker__cluster,
html[data-live-experience] .map-marker--business .map-marker__pin,
html[data-live-experience] .map-marker--business .map-marker__cluster {
  background: #c93f1d;
}
html[data-live-experience] .map-marker--services .map-marker__pin,
html[data-live-experience] .map-marker--services .map-marker__cluster {
  background: #0f4c81;
}
html[data-live-experience] .map-marker--health .map-marker__pin,
html[data-live-experience] .map-marker--health .map-marker__cluster,
html[data-live-experience] .map-marker--emergency .map-marker__pin,
html[data-live-experience] .map-marker--emergency .map-marker__cluster {
  background: #913866;
}
html[data-live-experience] .map-marker--tourism .map-marker__pin,
html[data-live-experience] .map-marker--tourism .map-marker__cluster,
html[data-live-experience] .map-marker--places .map-marker__pin,
html[data-live-experience] .map-marker--places .map-marker__cluster {
  background: #6d5ba8;
}
html[data-live-experience] .map-marker--community .map-marker__pin,
html[data-live-experience] .map-marker--community .map-marker__cluster {
  background: #a83415;
}
/* La ficha elegida se anilla en ámbar, el color que este producto reserva para
 * «esto es lo que estás mirando ahora». */
html[data-live-experience] .map-marker--selected {
  z-index: 700 !important;
  overflow: visible;
}
html[data-live-experience] .map-marker--selected .map-marker__pin,
html[data-live-experience] .map-marker--selected .map-marker__cluster {
  outline: 3px solid var(--live-amber-face);
  outline-offset: 2px;
}

/* «Abierto» deja de ser una etiqueta más: lleva el punto vivo, igual que Ahora. */
html[data-live-experience] .state-badge--open::before,
html[data-live-experience] .state-badge--current::before {
  background: var(--live-amber);
  box-shadow: 0 0 0 3px rgb(168 95 20 / 16%);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-live-experience] .state-badge--open::before {
    animation: live-dot-pulse 2.8s ease-in-out infinite;
  }
}

html[data-live-experience] .catalog-card__locate {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--live-green-line);
  border-radius: var(--live-radius-xs);
  background: var(--live-green-tint);
  color: var(--live-green-deep);
  font-size: 12.5px;
}
html[data-live-experience] .catalog-card__locate:hover {
  background: var(--live-green);
  border-color: var(--live-green);
  color: #fffdf7;
}
/* La tarjeta elegida se marca con un filo verde, no cambiando su fondo. */
html[data-live-experience] .catalog-card--selected {
  border-color: var(--live-green);
  box-shadow: var(--live-shadow-sm), inset 3px 0 0 var(--live-green);
}
/* Ficha completa: el mismo orden de lectura que la tarjeta, con más aire y
 * las etiquetas de dato en versalitas para que el valor sea lo que resalta. */
/* Cada ficha se viste de su familia. Antes todas se veían iguales: una farmacia de
 * turno y un mirador compartían la misma cabecera blanca, así que la pantalla no
 * decía de qué estabas hablando antes de leer. */
html[data-live-experience] #detail-sheet {
  --ficha: var(--live-green);
  --ficha-tinte: var(--live-green-tint);
}
html[data-live-experience] #detail-sheet[data-family="citizen"],
html[data-live-experience] #detail-sheet[data-family="safety"] {
  --ficha: #0e7490;
  --ficha-tinte: #dff1f5;
}
html[data-live-experience] #detail-sheet[data-family="commerce"],
html[data-live-experience] #detail-sheet[data-family="business"] {
  --ficha: #a83415;
  --ficha-tinte: #fdeae3;
}
html[data-live-experience] #detail-sheet[data-family="services"] {
  --ficha: #0f4c81;
  --ficha-tinte: #e3edf6;
}
html[data-live-experience] #detail-sheet[data-family="health"],
html[data-live-experience] #detail-sheet[data-family="pharmacy"],
html[data-live-experience] #detail-sheet[data-family="emergency"] {
  --ficha: #85325d;
  --ficha-tinte: #fbecf3;
}
html[data-live-experience] #detail-sheet[data-family="tourism"],
html[data-live-experience] #detail-sheet[data-family="places"] {
  --ficha: #6d5ba8;
  --ficha-tinte: #ece9f7;
}
html[data-live-experience] #detail-sheet[data-family="community"],
html[data-live-experience] #detail-sheet[data-family="event"] {
  --ficha: #c93f1d;
  --ficha-tinte: #fdeae3;
}

/* Cabecera: banda del color de la familia, con el nombre reservado en claro. */
html[data-live-experience] #detail-sheet .sheet-header {
  padding: 18px 16px 16px;
  border-bottom: 0;
  background: var(--ficha);
}
html[data-live-experience] #detail-sheet #detail-type {
  color: rgb(255 253 247 / 72%);
}
html[data-live-experience] #detail-sheet #detail-title {
  color: #fffdf7;
}
html[data-live-experience] #detail-sheet #close-detail {
  border-color: rgb(255 253 247 / 30%);
  background: rgb(255 253 247 / 14%);
  color: #fffdf7;
}
html[data-live-experience] #detail-sheet #close-detail:hover {
  background: rgb(255 253 247 / 26%);
  border-color: rgb(255 253 247 / 46%);
  color: #fffdf7;
}
/* Las insignias cuelgan de la banda, sobre el papel, no dentro del color. */
html[data-live-experience] #detail-content .detail-status-row {
  margin-top: -2px;
}

/* Una sola acción manda. «Cómo llegar» a las dos de la mañana pesa más que guardar. */
html[data-live-experience] .detail-action {
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-sm);
  background: var(--live-surface);
  color: var(--ficha);
  font-size: 14.5px;
  font-weight: 620;
  box-shadow: none;
}
html[data-live-experience] #detail-content .detail-actions--primary .detail-action:first-child {
  border-color: var(--ficha);
  background: var(--ficha);
  color: #fffdf7;
  box-shadow: var(--live-shadow-sm);
}
html[data-live-experience] .detail-action:hover {
  border-color: var(--ficha);
}

/* Guardar y compartir son secundarias: van después de la acción principal y con el
 * peso de un enlace, no el de un botón grande. */
html[data-live-experience] #detail-content .detail-personal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
html[data-live-experience] #detail-content .detail-personal-actions button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-xs);
  background: transparent;
  color: var(--live-ink-soft);
  font-size: 13px;
  font-weight: 600;
}
html[data-live-experience] #detail-content .detail-personal-actions button:hover:not(:disabled) {
  border-color: var(--ficha);
  color: var(--ficha);
}
/* Sólo la primera acción es sólida; «Ver fuente» no compite con «Cómo llegar». */
html[data-live-experience] #detail-content .detail-actions--primary .detail-action:not(:first-child) {
  border-color: var(--live-border);
  background: var(--live-surface);
  color: var(--ficha);
  box-shadow: none;
}
/* Siete bloques blancos iguales no son jerarquía. El filo de color los separa. */
html[data-live-experience] #detail-content .detail-section {
  border-left: 3px solid var(--ficha-tinte);
}
html[data-live-experience] #detail-content .detail-section h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ficha);
}
html[data-live-experience] #detail-content .detail-section h3::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--ficha);
}
html[data-live-experience] #detail-content .detail-provenance {
  border-left-color: var(--live-border-soft);
}
html[data-live-experience] #detail-sheet {
  border: 0;
  background: var(--live-canvas);
  box-shadow: var(--live-shadow-lg);
}
html[data-live-experience] #detail-type {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-title {
  margin: 5px 0 0;
  font-family: var(--live-display);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.22;
  color: var(--live-ink);
}
html[data-live-experience] #close-detail {
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-sm);
  background: var(--live-inset);
  color: var(--live-ink-soft);
}
html[data-live-experience] #close-detail:hover {
  background: var(--live-green-tint);
  border-color: var(--live-green-line);
  color: var(--live-green-deep);
}
html[data-live-experience] #detail-content .detail-summary {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--live-ink-soft);
}
html[data-live-experience] .detail-report {
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-sm);
  background: var(--live-surface);
  color: var(--live-green-deep);
  font-weight: 600;
  box-shadow: none;
}
html[data-live-experience] #detail-content .detail-section,
html[data-live-experience] #detail-content .detail-card {
  padding: 15px;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-md);
  background: var(--live-surface);
  box-shadow: var(--live-shadow-xs);
}
html[data-live-experience] #detail-content .detail-section h3 {
  margin: 0 0 10px;
  font-family: var(--live-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--live-ink);
}
html[data-live-experience] #detail-content .detail-data > div,
html[data-live-experience] #detail-content .fact-list > li {
  gap: 2px 14px;
  padding-block: 9px;
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #detail-content .detail-data > div:first-child,
html[data-live-experience] #detail-content .fact-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
html[data-live-experience] #detail-content .detail-data dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-content .detail-data dd {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--live-ink);
}
/* Las fichas de abajo refinan la puerta de arriba, y hasta ahora nada lo decía: se
 * leían como una segunda fila de ámbitos con las mismas palabras. El rótulo nombra la
 * puerta abierta y va en la misma línea que las fichas, para no gastar alto de mapa.
 * El recuento de capas queda sólo para lectores de pantalla: es un anuncio, no un
 * elemento de la pantalla. */
html[data-live-experience] .product-layout .layer-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
html[data-live-experience] .product-layout .layer-picker__heading {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  flex: none;
  font-size: 11.5px;
  color: var(--live-ink-mute);
}
html[data-live-experience] .product-layout #layer-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
html[data-live-experience] .product-layout #layer-options {
  min-width: 0;
  flex: 1 1 auto;
}
/* En teléfono el rótulo compite con las propias fichas por el ancho: vuelve a ser sólo
 * para lectores de pantalla y las fichas se quedan con toda la línea. */
@media (max-width: 47.99rem) {
  html[data-live-experience] .product-layout .layer-picker__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
/* Ventana de turno: primero el estado, después la hora que hay que recordar y recién
 * al pie el registro completo. El ámbar sigue reservado a lo que ocurre ahora, así que
 * sólo la farmacia abierta en este momento tiñe su tarjeta. */
html[data-live-experience] #detail-content .service-window {
  display: grid;
  gap: 5px;
}
html[data-live-experience] #detail-content .service-window h3 {
  margin: 0;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--live-ink-mute);
}
/* El rótulo cede la viñeta al punto de estado: dos puntos en la misma tarjeta compiten. */
html[data-live-experience] #detail-content .service-window h3::before {
  display: none;
}
html[data-live-experience] .service-window-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--live-display);
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--live-ink);
}
html[data-live-experience] .service-window-state::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live-ink-mute);
}
html[data-live-experience] .service-window-lead {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--live-ink);
}
html[data-live-experience] .service-window-range {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-content .service-window[data-state="now"] {
  border-color: var(--live-amber-line);
  background: var(--live-amber-tint);
}
html[data-live-experience] .service-window[data-state="now"] .service-window-state {
  color: var(--live-amber);
}
html[data-live-experience] .service-window[data-state="now"] .service-window-state::before {
  background: var(--live-amber);
  box-shadow: 0 0 0 4px rgb(168 95 20 / 15%);
}
html[data-live-experience] .service-window[data-state="past"] .service-window-state {
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-content .detail-provenance {
  border-color: var(--live-border-soft);
  background: var(--live-inset);
  box-shadow: none;
  color: var(--live-ink-soft);
}
html[data-live-experience] .results-provenance {
  font-size: 11px;
  border: 0;
  margin-top: 16px;
}
html[data-live-experience] #results-panel .site-footer {
  display: none;
}
html[data-live-experience] .product-layout .map-results-button {
  display: none;
}
/* El botón «Ver lista» vive en .map-workspace, fuera de .map-stage: el stage
 * lleva isolation:isolate y confinaría el position:fixed del botón dentro de
 * su contexto de apilamiento; allí su z-index (1300) no puede ganarle al panel
 * de resultados (1200) y el panel estirado se lo comería. Como hermano del
 * panel compite en la raíz y el botón queda por encima. */
/* Rótulos, leyenda y atribución comparten una misma ficha translúcida sobre el mapa
 * para que no compitan entre sí ni se pisen en pantallas angostas. */
html[data-live-experience] .map-legend,
html[data-live-experience] #map-zone-status,
html[data-live-experience] .leaflet-control-attribution {
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-xs);
  background: rgb(255 253 247 / 92%);
  box-shadow: var(--live-shadow-sm);
  backdrop-filter: blur(10px);
  color: var(--live-ink-soft);
}
html[data-live-experience] #map-panel .map-legend,
html[data-live-experience] .map-legend {
  inset-block-end: 12px;
  inset-inline-start: 12px;
  z-index: 465;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: calc(100% - 150px);
  overflow: hidden;
  gap: 11px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
html[data-live-experience] .legend-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px rgb(255 253 247 / 90%);
}
html[data-live-experience] #map-zone-status {
  inset-block-start: 14px;
  inset-block-end: auto;
  inset-inline: auto 12px;
  z-index: 465;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--live-ink);
  max-width: min(22rem, calc(100% - 92px));
}
html[data-live-experience] .leaflet-control-attribution {
  max-width: 62%;
  margin: 0 !important;
  padding: 3px 8px;
  border-width: 1px 0 0 1px;
  border-radius: var(--live-radius-xs) 0 0 0;
  box-shadow: none;
  font-size: 10px !important;
}
html[data-live-experience] .leaflet-control-attribution a {
  color: var(--live-green);
}
html[data-live-experience] .product-layout .leaflet-control-zoom {
  margin: 12px 0 0 12px;
  border: 1px solid var(--live-border) !important;
  border-radius: var(--live-radius-sm) !important;
  box-shadow: var(--live-shadow-md) !important;
  overflow: hidden;
}
html[data-live-experience] .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 34px;
  border-bottom-color: var(--live-border-soft);
  background: rgb(255 253 247 / 95%);
  color: var(--live-ink);
  font-size: 19px;
  backdrop-filter: blur(10px);
}
html[data-live-experience] .leaflet-control-zoom a:hover {
  background: var(--live-green-tint);
  color: var(--live-green-deep);
}
html[data-live-experience] .product-layout .map-canvas {
  background: #dbe7e4;
}
/* La luz del día la pinta el propio fondo MapLibre (map-base-style.js), que
   cambia de paleta según la fase. No se aplica filtro CSS ni velo sobre el
   lienzo GL: teñiría dos veces. */
html[data-live-experience] .map-canvas {
  position: relative;
}
/* Los alfileres siguen el mismo código de color que las fichas de ámbito. */
html[data-live-experience] .map-marker__pin {
  border: 2px solid rgb(255 253 247 / 92%);
  box-shadow: var(--live-shadow-md);
}
html[data-live-experience] #product-nav .contribution-card {
  color: var(--live-ink);
  padding: 16px;
  margin-top: 24px;
  border-radius: 14px;
  border-color: var(--marea-navy-line);
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), var(--marea-navy-tint));
}
html[data-live-experience] #product-nav .contribution-card__icon {
  display: none;
}
.live-empty {
  text-align: left;
  padding: 20px 0;
  background: transparent;
  border: 0;
}
.live-empty__symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid var(--live-border, #e3e0d2);
  border-radius: 50%;
  background: var(--live-inset, #f4f2e9);
  color: var(--live-ink-mute, #7a8a80);
  font-size: 20px;
  line-height: 1;
}
.live-empty strong {
  display: block;
  font-family: var(--live-display, Georgia, serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--live-ink, #16332c);
}
.live-empty p {
  line-height: 1.6;
  font-size: 13.5px;
  color: var(--live-ink-soft, #55675e);
}
.live-empty button {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
}
html[data-live-experience] :focus-visible {
  outline: 3px solid #bf7217;
  outline-offset: 3px;
}
/* El ancla de resultados recibe foco programado tras buscar o cambiar de
 * vista; con el anillo ámbar global el encabezado quedaba marcado por un
 * recuadro naranja en cada búsqueda. Un anillo fino del color de la paleta
 * conserva el indicador de teclado sin pintar la cabecera. */
html[data-live-experience] #results-anchor:focus-visible {
  outline: 2px solid var(--live-ink-mute);
  outline-offset: 5px;
  border-radius: var(--live-radius-xs);
}
@media (max-width: 67.99rem) {
  html[data-live-experience],
  html[data-live-experience] body {
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
  }
  html[data-live-experience] .product-layout.app-shell {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100vh;
    max-height: 100vh;
  }
  html[data-live-experience] .product-layout > main {
    padding: 12px;
  }
  html[data-live-experience] .map-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 14px;
  }
  html[data-live-experience][data-discovery-view] .product-layout #map-panel,
  html[data-live-experience][data-discovery-view] .product-layout #results-panel {
    grid-column: 1;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel,
  html[data-live-experience][data-discovery-view="list"] .product-layout #map-panel {
    display: none !important;
  }
  html[data-live-experience] .product-layout .map-results-button {
    display: block;
    /* Absolute y no fixed: el botón es hijo de .map-workspace y se ancla al
     * escenario del mapa (bottom-right del workspace). Así nunca se mete sobre
     * los controles aunque estos crezcan (a 1024×700 con filtros, el fixed a
     * top:59vh tapaba «Más filtros»), y al no haber isolation en el workspace
     * su z-index compite en la raíz y gana al panel de resultados (1200). */
    position: absolute;
    z-index: 1300;
    min-height: 42px;
    bottom: 12px;
    right: 12px;
    padding: 9px 15px;
    border: 1px solid var(--live-green);
    border-radius: var(--live-radius-sm);
    background: var(--live-green);
    color: #fffdf7;
    font-size: 13px;
    font-weight: 650;
    box-shadow: var(--live-shadow-md);
  }
  html[data-live-experience][data-simple-mode="true"] .product-layout .map-results-button {
    bottom: 12px;
  }
  html[data-live-experience] .product-layout .mobile-dock {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html[data-live-experience] .product-topbar.topbar {
    padding: 10px 14px;
    min-height: 0;
    gap: 10px;
  }
  html[data-live-experience] .product-layout #browse-controls {
    padding: 9px 10px 10px;
  }
  html[data-live-experience] .live-toolbar {
    position: sticky;
    top: -9px;
    z-index: 3;
    padding-block: 9px 4px;
    margin-block: -9px 0;
    background: var(--live-surface);
  }
  html[data-live-experience] .product-layout .browse-view-controls {
    display: flex;
  }
  html[data-live-experience] .product-more-filters > span {
    display: inline;
  }
  html[data-live-experience] .product-layout .browse-view-controls {
    display: none;
  }
}
@media (max-width: 39.99rem) {
  /* Columnas «auto»: cuando campana/cuenta se ocultan en teléfono, sus pistas
     colapsan a 0 y el ancho liberado queda para el territorio — así la
     etiqueta del perfil (p. ej. «Comuna de Arauco») no se trunca a 16px. */
  html[data-live-experience] .product-topbar.topbar {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 8px 12px;
  }
  html[data-live-experience] .product-territory {
    grid-column: 2;
    min-width: 0;
  }
  html[data-live-experience] .product-topbar .simple-toggle {
    display: none;
  }
  html[data-live-experience] .product-notifications {
    grid-column: 3;
    grid-row: 1;
  }
  html[data-live-experience] .product-account {
    grid-column: 4;
    grid-row: 1;
  }
  html[data-live-experience] .product-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  html[data-live-experience] .product-heading {
    margin-bottom: 10px;
    gap: 8px;
  }
  html[data-live-experience] .product-heading h1 {
    font-size: 21px;
    letter-spacing: -0.5px;
  }
  html[data-live-experience] .product-heading__actions button {
    padding: 8px 10px;
    font-size: 12px;
  }
  html[data-live-experience] .live-description {
    display: none;
  }
  html[data-live-experience] .product-heading .eyebrow {
    font-size: 10px;
  }
  html[data-live-experience] .live-toolbar {
    gap: 8px;
    flex-wrap: wrap;
  }
  html[data-live-experience] .live-mode-switch {
    flex: 0 1 auto;
  }
  html[data-live-experience] .live-mode-switch button {
    flex: 1;
    padding: 7px 10px;
    min-height: 38px;
  }
  html[data-live-experience] .live-status {
    order: 3;
    flex-basis: 100%;
    margin: 2px 0 0 2px;
    text-align: left;
    font-size: 11.5px;
  }
  html[data-live-experience] .live-refresh span {
    display: none;
  }
  html[data-live-experience] .product-filter-bar {
    flex-wrap: wrap;
  }
  html[data-live-experience] .product-filter-bar {
    flex-wrap: nowrap;
  }
  html[data-live-experience] .product-filter-bar > .layer-picker {
    flex: 1 1 0;
    min-width: 0;
  }
  html[data-live-experience] .product-more-filters {
    flex: none;
  }
  html[data-live-experience] #map-zone-status {
    inset-block-start: 10px;
    inset-block-end: auto;
    inset-inline: 56px 10px;
    width: auto;
    max-width: none;
    padding: 5px 9px;
    font-size: 10.5px;
  }
  html[data-live-experience] .map-legend {
    inset-block-end: 12px;
    inset-inline-start: 10px;
    gap: 9px;
    padding: 5px 9px;
    font-size: 10px;
  }
  html[data-live-experience] .product-layout .leaflet-control-zoom {
    margin: 10px 0 0 10px;
  }
  html[data-live-experience] .product-layout #results-panel {
    padding: 16px;
  }
}
@media (max-height: 40.625rem) {
  html[data-live-experience] .today-strip {
    display: none;
  }
}
@media (max-height: 46rem) {
  html[data-live-experience][data-simple-mode="true"] .today-strip {
    display: none;
  }
}
@media (max-height: 40.625rem) and (max-width: 67.99rem) {
  html[data-live-experience] .product-heading {
    display: none;
  }
  /* Sin tope de altura en los controles: con 18vh la fila de filtros (y «Más
   * filtros») quedaba recortada en pantallas bajas. El piso del mapa y el techo
   * de la barra flotante ordenan el espacio sin esconder controles. */
}
@media (max-height: 34rem) and (max-width: 67.99rem) {
  html[data-live-experience] .product-heading,
  html[data-live-experience] .live-status {
    display: none;
  }
  html[data-live-experience] .product-search {
    grid-row: 1;
    grid-column: auto;
  }
  html[data-live-experience] .product-topbar.topbar {
    display: flex;
  }
  html[data-live-experience] .product-territory {
    flex: 0 1 150px;
  }
  html[data-live-experience] .product-layout > main {
    padding-block: 4px;
  }
}

/* Proximamente: lo que este corte todavia no abre. Se ve, no se entra. */
html[data-live-experience] .product-nav__soon {
  margin-top: 10px;
  padding-top: 2px;
  border-top: 1px solid rgb(255 253 247 / 14%);
}
html[data-live-experience] .product-nav__soon .product-nav__links button[data-coming-soon] {
  color: rgb(255 253 247 / 45%);
  cursor: default;
}
html[data-live-experience] .product-nav__soon .product-nav__links button[data-coming-soon] .icon {
  opacity: 0.45;
}
html[data-live-experience] .product-nav__soon-note {
  margin: 6px 10px 14px;
  font-size: 11px;
  line-height: 1.45;
  color: rgb(255 253 247 / 45%);
}

/* D1 · Cabecera compacta en móvil. La descripción genérica bajo el H1 se
 * omite: el eyebrow con la fecha, el título y la cinta de hoy ya sitúan al
 * vecino. Gana espacio vertical para el mapa antes del pliegue. */
@media (max-width: 67.99rem) {
  html[data-live-experience] .product-heading .live-description {
    display: none;
  }
  html[data-live-experience] .product-heading {
    margin-bottom: 12px;
  }
}

/* D3 · Mapa con vida (sólo si el sistema permite movimiento). Los pines
 * entran cayendo, respiran en coral cuando el evento está pasando y se
 * levantan al pasar el cursor. El transform del pin conserva su rotación
 * de gota en cada estado. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes live-pin-drop {
    from {
      opacity: 0;
      transform: rotate(-45deg) scale(0.3);
    }
    to {
      opacity: 1;
      transform: rotate(-45deg) scale(1);
    }
  }
  @keyframes live-pin-pulse {
    0%,
    100% {
      box-shadow:
        0 4px 12px rgb(22 51 45 / 28%),
        0 0 0 0 rgb(232 85 47 / 45%);
    }
    50% {
      box-shadow:
        0 4px 12px rgb(22 51 45 / 28%),
        0 0 0 12px rgb(232 85 47 / 0%);
    }
  }
  html[data-live-experience] .map-marker__pin {
    animation: live-pin-drop 320ms ease-out backwards;
    transition:
      transform 140ms ease,
      box-shadow 140ms ease;
  }
  html[data-live-experience] .map-marker:hover .map-marker__pin,
  html[data-live-experience] .map-marker:focus-within .map-marker__pin {
    transform: rotate(-45deg) scale(1.14);
  }
  html[data-live-experience] .map-marker--event.map-marker--state-active .map-marker__pin {
    animation: live-pin-pulse 2.4s ease-in-out infinite;
  }
}

/* D3 · El mapa es el protagonista: en vista «mapa» los resultados dejan de
 * competir por la mitad de la pantalla y pasan a ser una barra de tarjetas
 * flotante abajo, desplazable en horizontal. La vista «lista» conserva el
 * panel lateral clásico. */
html[data-live-experience][data-discovery-view="map"] .product-layout .map-workspace {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .map-stage {
  /* Base 0 y no auto: con base automática el escenario medía 100% del taller y
   * el reparto flex aplastaba #browse-controls hasta recortarle la fila de
   * filtros (a 320×600 «Más filtros» quedaba fuera de la caja). Así los
   * controles miden su contenido y el mapa recibe lo que sobra. */
  flex: 1 1 0%;
  height: auto;
  min-height: 0;
  border-inline-end: 0;
}
@media (min-width: 68rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout #map-panel {
    min-height: 300px;
  }
}
html[data-live-experience][data-discovery-view="map"] .product-layout .map-stage:has(#map[data-picking-location]) {
  z-index: 1400;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .map-stage:has(.leaflet-popup) {
  z-index: 1350;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #map-panel .leaflet-popup-pane {
  z-index: 1500;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls:has([data-toggle-filters][aria-expanded="true"]) {
  z-index: 1300;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel {
  position: absolute;
  z-index: 1200;
  /* La barra abraza su contenido en cualquier ancho: con pocas tarjetas queda
   * una tira compacta a la izquierda y no tapa el mapa; con muchas crece hasta
   * el tope y la fila scrollea. El panel de la app suele mostrar ~840 px, bajo
   * el corte de escritorio: si el ancho completo sólo se aplicara ahí, la barra
   * seguiría vacía y estirada en la vista más común. */
  inset: auto auto 12px 12px;
  /* El techo de la barra es el borde inferior de los controles: medidos en
   * --browse-height (ResizeObserver en catalog-view.js). Sin este tope, con
   * un lienzo bajo la barra flotante subía sobre «Más filtros» y se lo comía
   * (a 320×600 el centro del botón quedaba bajo la cabecera del panel). */
  top: calc(var(--browse-height, 0px) + 12px);
  max-width: calc(100% - 24px);
  /* El !important y el #id no son capricho: las reglas móviles antiguas
   * (≤67.99rem aquí, ≤63.99rem y ≤39.99rem en app.css) ocultan este panel en
   * vista «mapa» con display:none !important, y un id siempre le gana a una
   * clase. Sin ambos, la barra nunca aparece en pantallas angostas. */
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  max-height: min(46%, 22rem);
  min-width: 0;
  padding: 10px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--live-border);
  border-radius: var(--live-radius-lg);
  background: var(--live-surface);
  box-shadow: var(--live-shadow-lg);
}
html[data-live-experience][data-discovery-view="map"] .product-layout .discovery-panel .results-provenance,
html[data-live-experience][data-discovery-view="map"] .product-layout .discovery-panel .site-footer {
  display: none;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #catalog-results {
  display: flex;
  gap: 10px;
  min-height: 0;
  padding-bottom: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #catalog-results .catalog-card {
  flex: 0 0 15.5rem;
  min-width: 0;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #catalog-results .catalog-card__button {
  height: 100%;
}
@media (max-width: 67.99rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel {
    /* Longhands y no inset: el tope superior debe heredarse de la regla base
     * (--browse-height); el atajo inset lo pondría de nuevo en auto. */
    top: calc(var(--browse-height, 0px) + 8px);
    right: auto;
    bottom: calc(var(--nav-height) + 8px);
    left: 8px;
    max-width: calc(100% - 16px);
    max-height: 44%;
  }
}

/* D3 · Chips de temas de turismo alineados a Marea (los estilos base viven
 * en app.css con la paleta bosque anterior). */
html[data-live-experience] .tourism-themes button {
  border-color: var(--live-border-strong);
  background: var(--live-surface);
  color: var(--live-ink);
}
html[data-live-experience] .tourism-themes button[aria-pressed="true"] {
  background: var(--marea-navy);
  border-color: var(--marea-navy);
  color: #ffffff;
}
html[data-live-experience] .tourism-themes button:focus-visible {
  outline: 3px solid var(--marea-coral);
  outline-offset: 2px;
}
html[data-live-experience] .tourism-themes [data-theme-count]:not(:empty) {
  background: var(--marea-navy-tint);
  color: var(--marea-navy-strong);
}

/* D3 · En vista «mapa» la leyenda sube arriba a la izquierda (la barra de
 * tarjetas ocupa el borde inferior) y el botón flotante «Ver lista» se oculta:
 * su función la cumple la propia barra y el conmutador Mapa/Lista. */
html[data-live-experience][data-discovery-view="map"] .product-layout #map-panel .map-legend {
  inset-block-end: auto;
  inset-block-start: 12px;
}
/* La franja visible del mapa en pantalla angosta es corta: la leyenda toma la
 * esquina y el control de zoom se retira (pellizco y doble toque cumplen su
 * función); si se apilan, la barra de tarjetas tapa el botón de alejar. En
 * escritorio el lienzo es alto y ambos conviven: zoom arriba, leyenda abajo. */
@media (min-width: 68rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout #map-panel .map-legend {
    inset-block-start: 6.5rem;
  }
}