/* Mapa vivo · capa visual V1 (etapa 2.1)
 *
 * Vidrio oscuro translúcido sobre la estructura existente: cabecera con marca
 * y widget de luz, buscador translúcido, filtros con recuento, pines con icono
 * por capa y tarjeta flotante de la farmacia de turno. Se carga después de
 * live-map.css y no mueve ni elimina ningún id ni atributo data-* de las
 * pruebas: sólo repinta y, en la vista «mapa», convierte la fila de controles
 * en una capa flotante sobre el lienzo (el desfase --browse-height que mide
 * catalog-view.js sigue mandando sobre la barra de resultados).
 *
 * Tipografía: Plus Jakarta Sans (autoalojada en /vendor/fonts/). Iconos:
 * Material Symbols Rounded (clases .ms .ms--nombre); el sprite SVG sigue
 * sirviendo a tarjetas y diálogos.
 */

html[data-live-experience] {
  --mv-glass: rgb(12 22 30 / 62%);
  --mv-glass-soft: rgb(12 22 30 / 46%);
  --mv-glass-deep: rgb(8 14 19 / 88%);
  --mv-line: rgb(255 255 255 / 14%);
  --mv-line-soft: rgb(255 255 255 / 9%);
  --mv-text: #f4f7f8;
  --mv-muted: #b9c6cc;
  --mv-accent: #19c3a1;
  --mv-accent-deep: #0e8a72;
  --mv-amber: #ffd166;
  --mv-blur: blur(14px) saturate(1.3);
  --mv-radius: 14px;
  --mv-shadow: 0 6px 20px rgb(0 0 0 / 32%);
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- iconos Material Symbols ---------- */
html[data-live-experience] .ms {
  font-size: 20px;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  speak: never;
}

/* ---------- topbar: barra de vidrio con marca y luz ---------- */
html[data-live-experience] .product-topbar.topbar {
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  border-bottom-color: var(--mv-line-soft);
  color: var(--mv-text);
}
html[data-live-experience] .product-topbar .product-menu-toggle,
html[data-live-experience] .product-topbar .product-help,
html[data-live-experience] .product-topbar .simple-toggle,
html[data-live-experience] .product-topbar .product-account,
html[data-live-experience] .product-topbar .product-notifications {
  color: var(--mv-text);
  border-color: var(--mv-line);
  background: rgb(255 255 255 / 6%);
}
html[data-live-experience] .product-topbar .product-help:hover,
html[data-live-experience] .product-topbar .product-menu-toggle:hover {
  background: rgb(255 255 255 / 12%);
}
html[data-live-experience] .product-topbar .product-territory .sector-control select,
html[data-live-experience] .product-topbar .product-territory .sector-control > .icon {
  color: var(--mv-text);
}
/* La lista desplegada de un <select> nativo la pinta el sistema con fondo
 * claro: si la opción hereda el texto claro del vidrio queda ilegible. */
html[data-live-experience] select option {
  color: #17353d;
  background-color: #fffefa;
}

/* Marca: el logotipo de olas y cerros más el nombre del territorio. */
html[data-live-experience] .mv-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-decoration: none;
  color: var(--mv-text);
}
html[data-live-experience] .mv-brand svg {
  width: 32px;
  height: 32px;
  flex: none;
}
html[data-live-experience] .mv-brand strong {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
html[data-live-experience] .mv-brand small {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--mv-muted);
  white-space: nowrap;
}

/* Widget de luz: fase del día y la próxima salida o puesta del sol. */
html[data-live-experience] .daylight-widget {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-soft);
  color: var(--mv-text);
  white-space: nowrap;
}
html[data-live-experience] .daylight-widget .ms {
  color: var(--mv-amber);
  font-size: 22px;
}
html[data-live-experience] .daylight-widget__body {
  display: grid;
  line-height: 1.25;
}
html[data-live-experience] .daylight-widget__body strong {
  font-size: 12.5px;
  font-weight: 650;
}
html[data-live-experience] .daylight-widget__body small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--mv-muted);
}
html[data-live-experience] .daylight-widget__body small .ms {
  font-size: 13px;
  color: var(--mv-muted);
}
html[data-live-experience] .daylight-widget[hidden] {
  display: none;
}

/* ---------- buscador translúcido ---------- */
html[data-live-experience] .product-search .map-search,
html[data-live-experience] .map-workspace .map-search {
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  border: 1px solid var(--mv-line);
  border-radius: 24px;
  color: var(--mv-text);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience] .map-search input {
  color: var(--mv-text);
  background: transparent;
}
html[data-live-experience] .map-search input::placeholder {
  color: var(--mv-muted);
}
html[data-live-experience] .map-search > .icon {
  color: var(--mv-muted);
}
html[data-live-experience] .map-search .map-search__submit {
  background: var(--mv-accent);
  color: #06231d;
  border-radius: 50%;
}
html[data-live-experience] .map-search .map-search__submit:hover {
  background: #23d4b0;
}
html[data-live-experience] .map-search .map-search__clear {
  color: var(--mv-muted);
}
html[data-live-experience] .map-search:focus-within {
  border-color: rgb(25 195 161 / 65%);
}

/* ---------- encabezado y cinta de hoy: vidrio compacto ---------- */
/* El encabezado es una placa de vidrio oscuro en ambas fases: el fondo de la
 * página es claro de día y oscuro de noche, y el titular debe leerse en ambos. */
html[data-live-experience] .product-heading {
  padding: 12px 16px;
  border: 1px solid var(--mv-line-soft);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
}
html[data-live-experience] .product-heading .eyebrow,
html[data-live-experience] .product-heading h1,
html[data-live-experience] .live-description {
  color: var(--mv-text);
}
html[data-live-experience] .product-heading__actions button {
  border: 1px solid var(--mv-line);
  background: var(--mv-glass-soft);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  border-radius: var(--mv-radius);
}
html[data-live-experience] .product-heading__actions button:hover {
  border-color: rgb(25 195 161 / 60%);
}
html[data-live-experience] .today-strip {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  /* Vidrio profundo: la cinta se lee igual sobre el fondo claro del día que
   * sobre el fondo oscuro de la noche. */
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience] .today-cell__k {
  color: var(--mv-muted);
}
/* La base pinta cada celda con la superficie clara del día; sobre vidrio
 * oscuro las celdas heredan el fondo de la cinta. */
html[data-live-experience] .today-strip .today-cell {
  background: transparent;
  border-right-color: var(--mv-line-soft);
}
html[data-live-experience] .today-cell__k .icon {
  color: var(--mv-muted);
}
html[data-live-experience] .today-cell__v,
html[data-live-experience] .today-cell__v a,
html[data-live-experience] .today-strip .today-cell__v strong {
  color: var(--mv-text);
}
html[data-live-experience] .today-strip .today-cell__v small,
html[data-live-experience] .today-strip .today-cell__src,
html[data-live-experience] .today-strip .today-cell__src a {
  color: var(--mv-muted);
}
html[data-live-experience] .today-cell--live {
  background: rgb(229 72 77 / 16%);
}
html[data-live-experience] .today-cell--live .today-cell__k {
  color: #ff9d97;
}

/* ---------- controles del mapa: fila de vidrio ---------- */
html[data-live-experience] .map-workspace {
  background: #101c26;
  border-color: rgb(255 255 255 / 8%);
}
html[data-live-experience] .product-layout #browse-controls {
  background: transparent;
  border-bottom: 0;
}
html[data-live-experience] .live-mode-switch {
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  border-color: var(--mv-line);
  border-radius: 999px;
}
html[data-live-experience] .live-mode-switch button {
  color: var(--mv-muted);
  border-radius: 999px;
}
html[data-live-experience] .live-mode-switch button:hover:not([aria-pressed="true"]) {
  color: var(--mv-text);
}
html[data-live-experience] .live-mode-switch button[aria-pressed="true"] {
  background: var(--mv-accent);
  border-color: transparent;
  color: #06231d;
}
html[data-live-experience] .live-mode-switch button[aria-pressed="true"] .live-dot {
  background: #b8321f;
  box-shadow: 0 0 0 3px rgb(184 50 31 / 22%);
}
html[data-live-experience] .live-status {
  color: var(--mv-muted);
}
html[data-live-experience] .live-refresh {
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  background: var(--mv-glass-soft);
  color: var(--mv-text);
}
html[data-live-experience] .live-refresh:hover {
  border-color: rgb(25 195 161 / 60%);
  color: var(--mv-accent);
}
html[data-live-experience] .live-toolbar {
  background: transparent;
}

/* Puertas de ámbito y capas: chips de vidrio con recuento visible. */
html[data-live-experience] .live-city-modes button,
html[data-live-experience] .layer-tabs button,
html[data-live-experience] .tourism-themes button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  font-weight: 600;
  box-shadow: none;
}
html[data-live-experience] .live-city-modes button .icon,
html[data-live-experience] .layer-tabs button .icon {
  color: var(--mv-accent);
}
html[data-live-experience] .live-city-modes button[aria-pressed="true"],
html[data-live-experience] .layer-tabs button[aria-pressed="true"],
html[data-live-experience] .tourism-themes button[aria-pressed="true"] {
  background: rgb(25 195 161 / 26%);
  border-color: rgb(25 195 161 / 70%);
  color: #eafffa;
}
html[data-live-experience] .tourism-themes [data-theme-count]:not(:empty) {
  background: rgb(255 255 255 / 12%);
  color: var(--mv-muted);
}
html[data-live-experience] .layer-picker__heading strong {
  color: var(--mv-text);
}
html[data-live-experience] .layer-picker__heading span {
  color: var(--mv-muted);
}
html[data-live-experience] .product-more-filters,
html[data-live-experience] .map-tool-button,
html[data-live-experience] .saved-trigger {
  border: 1px solid var(--mv-line);
  border-radius: 12px;
  background: var(--mv-glass-soft);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
}
html[data-live-experience] .product-more-filters[aria-expanded="true"] {
  border-color: rgb(25 195 161 / 70%);
}
html[data-live-experience] .sector-control select {
  color: var(--mv-text);
}
html[data-live-experience] .browse-view-controls button {
  border: 1px solid var(--mv-line);
  background: var(--mv-glass-soft);
  color: var(--mv-muted);
}
html[data-live-experience] .browse-view-controls button[aria-pressed="true"] {
  background: var(--mv-accent);
  border-color: transparent;
  color: #06231d;
}

/* Filtros extra y menú de categorías: vidrio profundo para leer sobre el mapa. */
html[data-live-experience] .product-extra-filters {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-deep);
  color: var(--mv-text);
  box-shadow: var(--mv-shadow);
}
/* El popover va con position: fixed (live-map.css) para escapar del scroll de la
 * tira de controles: el backdrop-filter NO puede vivir en .product-extra-filters
 * porque un ancestro con filtro se vuelve bloque contenedor de los fijos y el
 * menú se colocaba respecto al panel en vez de respecto a la ventana, saliéndose
 * por abajo en ventanas bajas. El desenfoque queda en el propio popover. */
html[data-live-experience] .category-menu__popover {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience] .product-extra-filters select,
html[data-live-experience] .product-extra-filters input,
html[data-live-experience] .category-menu__popover select {
  background: rgb(255 255 255 / 8%);
  border-color: var(--mv-line);
  color: var(--mv-text);
}
html[data-live-experience] .category-menu__popover header strong,
html[data-live-experience] .category-menu__popover p {
  color: var(--mv-muted);
}
html[data-live-experience] .category-options button {
  border-color: var(--mv-line);
  background: rgb(255 255 255 / 6%);
  color: var(--mv-text);
}
html[data-live-experience] .category-options button[aria-pressed="true"] {
  background: rgb(25 195 161 / 26%);
  border-color: rgb(25 195 161 / 70%);
}

/* Los chips de tema y los atajos de descubrimiento los pinta app.css con el id
 * #browse-controls (fondo blanco, texto oscuro); para que el vidrio oscuro les
 * llegue hay que igualar ese id en el selector. */
html[data-live-experience] .product-layout #browse-controls .topic-button,
html[data-live-experience] .product-layout #browse-controls .discovery-shortcut {
  border-color: var(--mv-line);
  background: var(--mv-glass);
  color: var(--mv-text);
}
html[data-live-experience] .product-layout #browse-controls .topic-button .icon,
html[data-live-experience] .product-layout #browse-controls .discovery-shortcut .icon {
  color: var(--mv-accent);
}
html[data-live-experience] .product-layout #browse-controls .topic-button[aria-pressed="true"],
html[data-live-experience] .product-layout #browse-controls .discovery-shortcut[aria-pressed="true"] {
  background: rgb(25 195 161 / 26%);
  border-color: rgb(25 195 161 / 70%);
  color: #eafffa;
  box-shadow: none;
}
html[data-live-experience] .product-layout #browse-controls .topic-button[aria-pressed="true"] span,
html[data-live-experience] .product-layout #browse-controls .discovery-shortcut[aria-pressed="true"] span {
  color: #eafffa;
}

/* ---------- vista «mapa»: controles flotantes sobre el lienzo ---------- */
html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1250;
  max-height: 64%;
  overflow: auto;
  scrollbar-width: thin;
  background: linear-gradient(180deg, rgb(5 10 14 / 58%) 0%, rgb(5 10 14 / 22%) 72%, transparent);
  pointer-events: none;
}
html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls > * {
  pointer-events: auto;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .map-stage {
  border-radius: 0;
}
/* Sobre el lienzo la fila de controles se lee como una sola tira: las capas se
 * desplazan en horizontal en vez de envolverse y tapar medio mapa, el rótulo
 * auxiliar («Dentro de…») cede y la leyenda sale de la esquina (cada tarjeta
 * ya informa su fuente con su propia insignia). */
html[data-live-experience][data-discovery-view="map"] .product-layout .layer-picker__heading {
  display: none;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .layer-tabs,
html[data-live-experience][data-discovery-view="map"] .product-layout .live-city-modes {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .layer-tabs::-webkit-scrollbar,
html[data-live-experience][data-discovery-view="map"] .product-layout .live-city-modes::-webkit-scrollbar {
  display: none;
}
html[data-live-experience][data-discovery-view="map"] .product-layout .live-city-modes button,
html[data-live-experience][data-discovery-view="map"] .product-layout .layer-tabs button {
  flex: none;
  background: var(--mv-glass-deep);
}
html[data-live-experience][data-discovery-view="map"] .product-layout .map-legend {
  display: none;
}
/* El popup nace dentro del lienzo (z 700) y sin este ajuste quedaría bajo la
 * tira de controles (z 1250): la ficha del lugar manda sobre la tira. */
html[data-live-experience][data-discovery-view="map"] .product-layout .leaflet-popup-pane {
  z-index: 1300;
}
html[data-live-experience] .live-status:empty {
  display: none;
}

/* ---------- lienzo, zoom, leyenda y atribución ---------- */
html[data-live-experience] .product-layout .map-canvas {
  background: #182634;
}
html[data-live-experience] .product-layout .leaflet-control-zoom {
  border: 0 !important;
  border-radius: var(--mv-radius) !important;
  box-shadow: var(--mv-shadow) !important;
}
html[data-live-experience] .leaflet-control-zoom a {
  width: 44px;
  height: 44px;
  line-height: 42px;
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  border-bottom: 1px solid var(--mv-line-soft);
}
html[data-live-experience] .leaflet-control-zoom a:hover {
  background: rgb(25 195 161 / 30%);
  color: #eafffa;
}
html[data-live-experience] .leaflet-control-attribution {
  background: rgb(8 14 19 / 62%) !important;
  color: #b8c4ca !important;
}
html[data-live-experience] .leaflet-control-attribution a {
  color: #d7e2e7 !important;
}
html[data-live-experience] .map-legend {
  border: 1px solid var(--mv-line);
  border-radius: 10px;
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
}
html[data-live-experience] .map-zone-status {
  background: var(--mv-glass-deep);
  border: 1px solid var(--mv-line);
  border-radius: 10px;
  color: var(--mv-text);
}

/* ---------- pines: lágrima con icono por capa y pastilla de nombre ---------- */
html[data-live-experience] .map-marker {
  /* !important: la hoja base fija display:grid con !important en varias capas;
   * el pin y su pastilla se alinean en fila, con la punta bajo el ancla. */
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-start;
}
html[data-live-experience] .map-marker--cluster {
  display: grid !important;
  place-items: center;
}
html[data-live-experience] .map-marker__pin {
  width: 30px;
  height: 30px;
  margin-left: 9px;
  flex: none;
  border: 2px solid rgb(255 255 255 / 95%);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
}
html[data-live-experience] .map-marker__pin > .ms {
  font-size: 16px;
  color: #ffffff;
  transform: rotate(45deg);
}
/* El icono del sprite SVG sigue en el DOM (contrato de las pruebas e2e) pero
 * el icono visible es Material Symbols: una sola silueta por capa. */
html[data-live-experience] .map-marker__pin > svg.icon,
html[data-live-experience] .map-marker__cluster > svg.icon {
  display: none;
}
html[data-live-experience] .map-marker--selected .map-marker__pin,
html[data-live-experience] .map-marker--pharmacy .map-marker__pin {
  width: 36px;
  height: 36px;
  margin-left: 6px;
}
html[data-live-experience] .map-marker--selected .map-marker__pin > .ms,
html[data-live-experience] .map-marker--pharmacy .map-marker__pin > .ms {
  font-size: 19px;
}
html[data-live-experience] .map-marker__label {
  align-self: center;
  flex: none;
  max-width: 11rem;
  margin: 0 0 6px 6px;
  padding: 4px 9px;
  overflow: hidden;
  border: 1px solid var(--mv-line-soft);
  border-radius: 9px;
  background: rgb(10 17 23 / 82%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
}
html[data-live-experience] .map-marker--pharmacy .map-marker__pin,
html[data-live-experience] .map-marker--pharmacy .map-marker__cluster {
  background: #e5484d;
}
html[data-live-experience] .map-marker--health .map-marker__pin,
html[data-live-experience] .map-marker--health .map-marker__cluster {
  background: #f03e5b;
}
html[data-live-experience] .map-marker--emergency .map-marker__pin,
html[data-live-experience] .map-marker--emergency .map-marker__cluster {
  background: #e8590c;
}
html[data-live-experience] .map-marker--safety .map-marker__pin,
html[data-live-experience] .map-marker--safety .map-marker__cluster {
  background: #2f7df6;
}
html[data-live-experience] .map-marker--citizen .map-marker__pin,
html[data-live-experience] .map-marker--citizen .map-marker__cluster,
html[data-live-experience] .map-marker--public_service .map-marker__pin,
html[data-live-experience] .map-marker--public_service .map-marker__cluster {
  background: #0d9488;
}
html[data-live-experience] .map-marker--services .map-marker__pin,
html[data-live-experience] .map-marker--services .map-marker__cluster {
  background: #0369a1;
}
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: #d9730d;
}
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: #8b5cf6;
}
html[data-live-experience] .map-marker--community .map-marker__pin,
html[data-live-experience] .map-marker--community .map-marker__cluster {
  background: #db2777;
}
html[data-live-experience] .map-marker--event .map-marker__pin,
html[data-live-experience] .map-marker--event .map-marker__cluster {
  background: #16a34a;
}
html[data-live-experience] .map-marker--today .map-marker__pin,
html[data-live-experience] .map-marker--today .map-marker__cluster {
  background: var(--mv-accent-deep);
}
html[data-live-experience] .map-marker__cluster {
  border: 2px solid rgb(255 255 255 / 95%);
  box-shadow: 0 3px 10px rgb(0 0 0 / 40%);
}
html[data-live-experience] .map-marker--selected .map-marker__pin,
html[data-live-experience] .map-marker--selected .map-marker__cluster {
  outline: 3px solid var(--mv-amber);
  outline-offset: 2px;
}

/* ---------- popups del mapa: vidrio profundo ---------- */
html[data-live-experience] .leaflet-popup-content-wrapper {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience] .leaflet-popup-tip {
  background: var(--mv-glass-deep);
  border: 1px solid var(--mv-line);
}
html[data-live-experience] .leaflet-popup-close-button {
  color: var(--mv-muted) !important;
}
html[data-live-experience] .map-place-popup__heading small,
html[data-live-experience] .map-place-popup__source,
html[data-live-experience] .map-place-popup__address {
  color: var(--mv-muted);
}
html[data-live-experience] .map-place-popup__heading strong,
html[data-live-experience] .map-place-popup__summary {
  color: var(--mv-text);
}
html[data-live-experience] .map-place-popup__metrics span {
  color: var(--mv-muted);
}
html[data-live-experience] .map-place-popup__detail {
  background: var(--mv-accent);
  color: #06231d;
  border-radius: 10px;
}
html[data-live-experience] .map-cluster-popup strong {
  color: var(--mv-text);
}
html[data-live-experience] .map-cluster-popup p {
  color: var(--mv-muted);
}
html[data-live-experience] .map-cluster-list button {
  border-color: var(--mv-line);
  background: rgb(255 255 255 / 6%);
  color: var(--mv-text);
}
html[data-live-experience] .leaflet-tooltip {
  border: 1px solid var(--mv-line-soft);
  border-radius: 8px;
  background: rgb(10 17 23 / 88%);
  color: var(--mv-text);
  box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
  font-weight: 600;
}
html[data-live-experience] .leaflet-tooltip-top::before {
  border-top-color: rgb(10 17 23 / 88%);
}

/* ---------- barra de resultados flotante: tarjetas oscuras ---------- */
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-radius);
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .panel-heading h2,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .result-summary {
  color: var(--mv-text);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .results-intro,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .trust-cue {
  color: var(--mv-muted);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__button {
  border: 1px solid var(--mv-line-soft);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: var(--mv-text);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__button:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(25 195 161 / 45%);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__body,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__title,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__button {
  color: var(--mv-text);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__summary,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__meta,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__facts {
  color: var(--mv-muted);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .empty-state {
  color: var(--mv-muted);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .empty-state p {
  color: var(--mv-muted);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .empty-state strong {
  color: var(--mv-text);
}
/* El aviso de fuentes degradadas no tiene estilo propio en la hoja base: hereda
 * la tinta oscura del panel y desaparece sobre el vidrio. Ámbar, como aviso. */
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .content-degraded {
  color: var(--mv-amber);
}

/* ---------- tarjeta flotante de la farmacia de turno ----------
 * Abajo a la derecha, sobre la atribución (que es exigencia de licencia y
 * queda visible bajo ella); la barra de resultados cede ese rincón vía :has(). */
html[data-live-experience] .pharmacy-peek {
  position: absolute;
  z-index: 1280;
  right: 10px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(19rem, calc(100% - 88px));
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--mv-line);
  border-radius: 16px;
  background: var(--mv-glass);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: var(--mv-text);
  text-align: left;
  box-shadow: var(--mv-shadow);
  cursor: pointer;
}
html[data-live-experience] .pharmacy-peek[hidden] {
  display: none;
}
html[data-live-experience] .pharmacy-peek:hover {
  border-color: rgb(229 72 77 / 65%);
}
html[data-live-experience] .pharmacy-peek__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: #e5484d;
}
html[data-live-experience] .pharmacy-peek__icon .ms {
  color: #ffffff;
  font-size: 21px;
}
html[data-live-experience] .pharmacy-peek__body {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}
html[data-live-experience] .pharmacy-peek__body strong {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-live-experience] .pharmacy-peek__body small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: #cfe3da;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-live-experience] .pharmacy-peek__live {
  color: #3ddc97;
  font-weight: 650;
}
html[data-live-experience] .pharmacy-peek > .ms--chevron-right {
  margin-left: auto;
  color: var(--mv-muted);
}

/* La tarjeta de la farmacia convive con la barra de resultados: la barra cede
 * el rincón derecho y la tarjeta respira sobre la atribución. */
html[data-live-experience][data-discovery-view="map"]
  .product-layout
  .map-workspace:has(.pharmacy-peek:not([hidden]))
  #results-panel {
  max-width: calc(100% - 24px - 20rem);
}
@media (max-width: 67.99rem) {
  html[data-live-experience] .pharmacy-peek {
    right: 8px;
    bottom: calc(var(--nav-height) + 8px);
    max-width: 12.5rem;
    min-height: 48px;
    padding: 6px 10px;
  }
  html[data-live-experience] .pharmacy-peek__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  html[data-live-experience][data-discovery-view="map"]
    .product-layout
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    #results-panel {
    max-width: calc(100% - 16px - 13rem);
  }
}
@media (max-width: 39.99rem) {
  /* En el teléfono la tarjeta se compacta a icono + nombre y sube sobre
   * «Ver lista»: ambas conviven sin pisarse ni tapar la atribución. */
  html[data-live-experience] .pharmacy-peek__body small {
    display: none;
  }
  html[data-live-experience] .pharmacy-peek {
    bottom: calc(var(--nav-height) + 8px + 60px);
    max-width: 11rem;
  }
  html[data-live-experience] .map-workspace:has(.pharmacy-peek:not([hidden]))
    .map-results-button {
    bottom: calc(12px + 56px);
  }
  html[data-live-experience][data-discovery-view="map"]
    .product-layout
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    #results-panel {
    max-width: calc(100% - 16px - 9rem);
  }
}

/* ---------- «Ver lista» flotante ---------- */
html[data-live-experience] .product-layout .map-results-button {
  border: 1px solid rgb(25 195 161 / 55%);
  border-radius: 999px;
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
  color: #eafffa;
}

/* ---------- barra inferior ---------- */
html[data-live-experience] .product-layout .mobile-dock {
  border-top: 1px solid var(--mv-line-soft);
  background: var(--mv-glass-deep);
  backdrop-filter: var(--mv-blur);
  -webkit-backdrop-filter: var(--mv-blur);
}
html[data-live-experience] .product-layout .mobile-dock > * {
  color: var(--mv-muted);
}
html[data-live-experience] .product-layout .mobile-dock [aria-pressed="true"] {
  color: var(--mv-accent);
}
html[data-live-experience] .product-layout .mobile-dock > *:hover {
  color: var(--mv-text);
}

/* ---------- fase nocturna: el vidrio baja una marcha ---------- */
html[data-live-experience][data-daylight="noche"] {
  --mv-glass: rgb(8 14 19 / 72%);
  --mv-glass-soft: rgb(8 14 19 / 56%);
}
html[data-live-experience][data-daylight="noche"] .product-layout .map-canvas {
  background: #0b1420;
}

/* ---------- compactos ---------- */
@media (max-width: 39.99rem) {
  /* La marca vive en el menú lateral; en el teléfono la topbar prioriza
   * territorio, luz y búsqueda. */
  html[data-live-experience] .mv-brand {
    display: none;
  }
  html[data-live-experience] .daylight-widget {
    grid-column: 3;
    grid-row: 1;
    padding: 6px 10px;
    gap: 6px;
  }
  /* Sólo el icono: el rótulo de la fase cede su sitio al selector de
   * territorio, que así muestra el nombre completo sin truncarse. */
  html[data-live-experience] .daylight-widget__body {
    display: none;
  }
}
@media (min-width: 40rem) and (max-width: 67.99rem) {
  /* La marca vive en el menú lateral; en tablet la topbar prioriza que el
   * buscador respire (con marca + luz + territorio el campo quedaba en 0 px). */
  html[data-live-experience] .mv-brand {
    display: none;
  }
  /* Ni aún sin la marca cabe el buscador en la primera fila (el campo medía
   * 0 px de ancho y dejaba de ser usable): baja a una segunda fila a todo lo
   * ancho, como ya hace el corte de teléfono con grid-row. */
  html[data-live-experience] .product-topbar.topbar {
    flex-wrap: wrap;
  }
  html[data-live-experience] .product-topbar .product-search {
    flex: 1 1 100%;
    order: 8;
  }
}

/* ---------- encuadre: nada se pisa (29/09/2026) ----------
 * Revisión del propietario sobre las capturas de la etapa 2.2: «se ve todo descuadrado». Cada
 * regla de este bloque corrige un solapamiento, un corte o un vacío medido en 375×812. */

/* La cinta de hoy repartía el ancho sólo entre las celdas con contenido y dejaba un hueco con
 * una línea divisoria suelta a la derecha (clima y «en el mapa» ocultas): la última celda
 * visible ocupa el resto y no dibuja divisoria. */
html[data-live-experience] .today-strip .today-cell:not([hidden]):not(:has(~ .today-cell:not([hidden]))) {
  flex: 1 1 auto;
  border-right: 0;
}

/* Borrar la búsqueda: un círculo claro de 48 px sobre el vidrio oscuro; queda como icono. */
html[data-live-experience] #clear-search {
  background: transparent;
  border-color: transparent;
  color: var(--mv-muted);
}
html[data-live-experience] #clear-search:hover {
  background: rgb(255 255 255 / 8%);
  color: var(--mv-text);
}

/* La línea de estado («Consultando…», «Sin conexión», «Información incompleta») flotaba como
 * texto suelto sobre el mapa: pastilla de vidrio, legible sobre cualquier fondo. */
html[data-live-experience][data-discovery-view="map"] .product-layout .live-status:not(:empty) {
  padding: 3px 10px;
  border: 1px solid var(--mv-line-soft);
  border-radius: 999px;
  background: var(--mv-glass-deep);
  font-size: 12px;
  line-height: 1.4;
  flex: none;
  width: fit-content;
}

/* El aviso de fondo lento era una tarjeta blanca bajo los controles y la barra de resultados. */
html[data-live-experience] .map-fallback {
  border-color: var(--mv-line);
  background: var(--mv-glass-deep);
  color: var(--mv-text);
  box-shadow: var(--mv-shadow);
}
html[data-live-experience] .map-fallback div span {
  color: var(--mv-muted);
}
html[data-live-experience] .map-fallback > .icon {
  color: var(--mv-accent);
}
html[data-live-experience] .map-fallback button {
  border-color: transparent;
  background: var(--mv-accent);
  color: #06231d;
}

/* Atribución: el prefijo de Leaflet no es exigencia de licencia; lo son OpenMapTiles,
 * OpenStreetMap y OpenFreeMap, que quedan visibles. */
html[data-live-experience] .leaflet-control-attribution > a[href="https://leafletjs.com"],
html[data-live-experience] .leaflet-control-attribution > a[href="https://leafletjs.com"] + span {
  display: none;
}

/* Con los controles flotando, el rótulo de zona repetía el territorio de la cabecera y quedaba bajo
 * el conmutador (teléfono) o bajo «Actualizar» (tablet y escritorio). El selector de la cabecera ya
 * nombra la localidad elegida; en la vista «lista» el rótulo sigue sobre el mapa. */
html[data-live-experience][data-discovery-view="map"] .product-layout #map-zone-status {
  display: none;
}
/* El zoom vive arriba a la izquierda (e2e-responsive) y quedaba bajo el conmutador en todos los
 * anchos: los controles flotantes empiezan a su derecha. */
html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls {
  padding-left: 56px;
}
/* En la barra flotante la tarjeta es un avance: la descripción y los datos se cortaban por el tope
 * de la barra; quedan en la ficha y en la lista. */
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__summary,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel
  .catalog-card__title ~ .catalog-card__meta {
  display: none;
}
/* De día, el estado y la acción de la tarjeta conservaban la tinta de la paleta clara (gris azulado y
 * azul oscuro) sobre el vidrio oscuro de la barra: no se leían. */
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .state-badge {
  border-color: var(--mv-line);
  color: var(--mv-muted);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__cta {
  color: var(--mv-accent);
}
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .catalog-card__locate {
  border-color: var(--mv-line);
  background: transparent;
  color: var(--mv-text);
}
/* La frase de instrucciones y el aviso largo de fuentes empujaban la tarjeta bajo el tope de la
 * barra. Sobre el mapa, la pastilla «Información incompleta» ya lo señala; el aviso completo sigue en
 * la lista. */
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .results-intro,
html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel .content-degraded {
  display: none;
}
/* Con una sola tarjeta, el aviso de fuentes estiraba la barra sobre dos tercios del mapa: tope de
 * 34rem, sin invadir el rincón de la farmacia (misma especificidad que la regla de :has()). */
@media (min-width: 40rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel {
    /* Con tope arriba y abajo la barra medía siempre su máximo y dejaba un hueco bajo la tarjeta. Un
     * título de dos líneas dejaba «Ver en el mapa» cortado bajo el tope anterior (46 %, 22rem). */
    bottom: auto;
    max-width: min(34rem, calc(100% - 24px));
    max-height: min(54%, 24rem);
  }
  html[data-live-experience][data-discovery-view="map"]
    .product-layout
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    #results-panel {
    max-width: min(34rem, calc(100% - 24px - 20rem));
  }
}
@media (min-width: 40rem) and (max-width: 67.99rem) {
  html[data-live-experience][data-discovery-view="map"]
    .product-layout
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    #results-panel {
    max-width: min(34rem, calc(100% - 16px - 13rem));
  }
}
/* text-overflow no actúa sobre un contenedor flex: «hasta mañana a las 08:59» se cortaba en seco. */
html[data-live-experience] .pharmacy-peek__body small {
  display: block;
}
html[data-live-experience] .pharmacy-peek__live {
  margin-right: 5px;
}
@media (max-width: 39.99rem) {
  /* En el teléfono la línea pequeña sigue oculta (etapa 2.2): la cinta de hoy ya dice hasta cuándo, y
   * la regla de arriba la volvía a mostrar cortada en «hast…». */
  html[data-live-experience] .pharmacy-peek__body small {
    display: none;
  }
}
/* Al abrir una ficha el foco va al título para los lectores de pantalla; el título no es un control
 * y su anillo se veía como un recuadro naranja alrededor del nombre. */
html[data-live-experience] #detail-title:focus {
  outline: none;
}

@media (max-width: 39.99rem) {
  /* La barra de resultados se estrujaba a 190 px junto a la farmacia y cortaba su propio texto.
   * En el teléfono el mapa queda limpio (como pide e2e-flow: «el mapa móvil no debe quedar
   * saturado por el listado») y la lista completa está a un toque en «Ver lista». */
  html[data-live-experience][data-discovery-view="map"] .product-layout #results-panel {
    display: none !important;
  }
  /* Farmacia a la izquierda y «Ver lista» a la derecha, en una sola fila sobre la atribución. */
  html[data-live-experience][data-discovery-view="map"] .pharmacy-peek {
    right: auto;
    bottom: 30px;
    left: 8px;
    max-width: calc(100% - 16px - 8.5rem);
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout .map-results-button,
  html[data-live-experience][data-discovery-view="map"]
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    .map-results-button {
    right: 8px;
    bottom: 30px;
  }
  html[data-live-experience] .leaflet-control-attribution {
    max-width: 100%;
    font-size: 9.5px;
    line-height: 1.35;
  }
}

/* «Buscar» es un enlace y live-map.css le fija la tinta oscura de la paleta anterior con
 * !important: sobre el dock de vidrio parecía deshabilitado. Mismo peso para devolverle el tono
 * de las demás acciones. */
html[data-live-experience] .product-layout .mobile-dock__search {
  color: var(--mv-muted) !important;
}

/* Filas de chips que se desplazan en horizontal: el último chip se desvanece en el borde en vez
 * de quedar cortado en seco (se leía «T» por «Trabajo» junto a «Más filtros»). */
html[data-live-experience][data-discovery-view="map"] .product-layout .layer-tabs,
html[data-live-experience][data-discovery-view="map"] .product-layout .live-city-modes {
  mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
}

/* Vista «lista»: los chips son de vidrio oscuro y la franja de controles era crema; de día se
 * veían grises, como apagados, y el seleccionado (turquesa pálido con letra blanca) no se leía.
 * La franja toma el mismo vidrio que la cabecera y la cinta. */
html[data-live-experience][data-discovery-view="list"] .product-layout #browse-controls {
  background: var(--mv-glass-deep);
  border-bottom: 1px solid var(--mv-line-soft);
}
html[data-live-experience][data-discovery-view="list"] .product-layout #browse-controls .live-status {
  color: var(--mv-muted);
}

/* La línea entre puertas y refinamientos era la de la paleta clara anterior: blanca sobre vidrio. */
html[data-live-experience] .product-layout .product-filter-bar {
  border-top-color: var(--mv-line-soft);
}

/* El aviso de fuentes incompletas se leía como el titular de la lista. */
html[data-live-experience] .product-layout #results-panel .content-degraded {
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 39.99rem) {
  /* Sobre el mapa, «Más filtros» queda en su icono (el nombre sigue para lectores de pantalla):
   * con el rótulo, «Transporte» y «Trabajo» no cabían y el segundo se cortaba en «T». */
  html[data-live-experience][data-discovery-view="map"] .product-layout .product-more-filters {
    padding-inline: 12px;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout .product-more-filters span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* En la lista, el botón flotante «Ver lista» tapaba las tarjetas y llevaba adonde ya se está. */
  html[data-live-experience][data-discovery-view="list"] .product-layout .map-results-button {
    display: none;
  }
  /* La atribución ocupa el borde inferior entero, en una o dos líneas, y la farmacia y «Ver lista»
   * se apoyan encima sin taparla. */
  html[data-live-experience][data-discovery-view="map"] .product-layout .leaflet-bottom.leaflet-right {
    left: 0;
  }
  /* #map-panel: app.css la limita a 45vw con un id y la partía en tres líneas bajo «Ver lista». */
  html[data-live-experience][data-discovery-view="map"] #map-panel .leaflet-control-attribution {
    max-width: none;
    border-radius: 0;
    border-left: 0;
  }
  html[data-live-experience][data-discovery-view="map"] .pharmacy-peek,
  html[data-live-experience][data-discovery-view="map"] .product-layout .map-results-button,
  html[data-live-experience][data-discovery-view="map"]
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    .map-results-button {
    bottom: 38px;
  }
}

/* En «Próximamente», la entrada de actividades conservaba el recuadro de botón destacado de su lugar
 * original y parecía la única disponible. */
html[data-live-experience] [data-coming-soon-links] [data-coming-soon="true"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Estilo C · Costa viva (elegido por el propietario el 30/09/2026, caja 22)
 *
 * Piel sobre la estructura existente: de día y al atardecer el vidrio pasa de oscuro a blanco, con
 * tinta verde bosque, acento verde de golfo y ámbar sólo para «ahora». De noche se conserva el vidrio
 * oscuro de la etapa 2.1. La tipografía se afina (tamaños y pesos menores, títulos sin serifa),
 * como pidió el propietario («fina y elegante»). No mueve ids ni data-* de las pruebas.
 * Referencia: https://claude.ai/artifact/VgYx5DKoNanEs9kMn925UJ
 */

html[data-live-experience]:not([data-daylight="noche"]) {
  --mv-glass: rgb(255 255 255 / 82%);
  --mv-glass-soft: rgb(255 255 255 / 70%);
  --mv-glass-deep: rgb(255 255 255 / 95%);
  --mv-line: rgb(18 48 42 / 12%);
  --mv-line-soft: rgb(18 48 42 / 8%);
  --mv-text: #12302a;
  --mv-muted: #5a6f68;
  /* Oscurecido el 30/09/2026 (aprobado): 4,96:1 con blanco encima y 4,55:1 sobre el papel (antes 4,31 y 3,96). */
  --mv-accent: #0e7f64;
  --mv-accent-deep: #0b6e56;
  --mv-amber: #b86a00;
  --mv-shadow: 0 6px 20px rgb(18 48 42 / 14%);
  --cv-accent-ink: #ffffff;
  --cv-canvas: #f3f6f4;
  --cv-now: #e8920c;
  --cv-map-bg: #dfe8e3;
  /* Papel de la lista y de las fichas: frío y limpio, en vez del papel cálido anterior. */
  --live-canvas: #f3f6f4;
  --live-surface: #ffffff;
  /* Los puntos de «ahora» (fecha de hoy, conmutador, farmacia) eran rojo anaranjado: pasan al ámbar. */
  --live-amber-strong: #e8920c;
}
html[data-live-experience]:not([data-daylight="noche"]) .live-dot {
  box-shadow: 0 0 0 3px rgb(232 146 12 / 20%);
}
html[data-live-experience] {
  /* Títulos sin serifa en todas las fases. */
  --live-display: var(--font-sans);
}

/* ---------- tipografía fina ---------- */
html[data-live-experience] .product-heading h1 {
  font: 600 20px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
}
html[data-live-experience] .mv-brand strong {
  font-size: 15px;
  font-weight: 600;
}
html[data-live-experience] .live-city-modes button,
html[data-live-experience] .layer-tabs button,
html[data-live-experience] .tourism-themes button,
html[data-live-experience] .product-layout #browse-controls .topic-button {
  font-size: 13px;
  font-weight: 500;
}
html[data-live-experience] .live-mode-switch button {
  font-size: 13px;
  font-weight: 500;
}
html[data-live-experience] #results-title,
html[data-live-experience] #detail-title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-live-experience] #detail-title {
  font-size: 21px;
}
html[data-live-experience] #results-title {
  font-size: 18px;
}
html[data-live-experience] .catalog-card__title {
  font-weight: 600;
}

/* ---------- controles sobre vidrio blanco (día y atardecer) ----------
 * La capa 2.1 escribió a mano tintas pensadas para vidrio oscuro: texto casi negro sobre turquesa,
 * blanco verdoso sobre selección translúcida. Sobre vidrio blanco se leían al revés. */
html[data-live-experience]:not([data-daylight="noche"]) .live-mode-switch button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .browse-view-controls button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .map-search .map-search__submit,
html[data-live-experience]:not([data-daylight="noche"]) .map-fallback button,
html[data-live-experience]:not([data-daylight="noche"]) .map-place-popup__detail {
  background: var(--mv-accent);
  color: var(--cv-accent-ink);
}
html[data-live-experience]:not([data-daylight="noche"]) .map-search .map-search__submit:hover {
  background: var(--mv-accent-deep);
}
html[data-live-experience]:not([data-daylight="noche"]) .live-mode-switch button[aria-pressed="true"] .live-dot {
  background: var(--cv-now);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
}
html[data-live-experience]:not([data-daylight="noche"]) .live-city-modes button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .layer-tabs button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .tourism-themes button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .category-options button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"])
  .product-layout
  #browse-controls
  .topic-button[aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"])
  .product-layout
  #browse-controls
  .discovery-shortcut[aria-pressed="true"] {
  background: var(--mv-accent);
  border-color: var(--mv-accent);
  color: var(--cv-accent-ink);
}
html[data-live-experience]:not([data-daylight="noche"]) .live-city-modes button[aria-pressed="true"] .icon,
html[data-live-experience]:not([data-daylight="noche"]) .layer-tabs button[aria-pressed="true"] .icon,
html[data-live-experience]:not([data-daylight="noche"])
  .product-layout
  #browse-controls
  .topic-button[aria-pressed="true"]
  :is(span, .icon),
html[data-live-experience]:not([data-daylight="noche"])
  .product-layout
  #browse-controls
  .discovery-shortcut[aria-pressed="true"]
  :is(span, .icon) {
  color: var(--cv-accent-ink);
}
html[data-live-experience]:not([data-daylight="noche"]) .tourism-themes [data-theme-count]:not(:empty) {
  background: rgb(18 48 42 / 8%);
  color: var(--mv-muted);
}
html[data-live-experience]:not([data-daylight="noche"]) .tourism-themes button[aria-pressed="true"] [data-theme-count] {
  background: rgb(255 255 255 / 22%);
  color: var(--cv-accent-ink);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-topbar .product-menu-toggle,
html[data-live-experience]:not([data-daylight="noche"]) .product-topbar .product-help,
html[data-live-experience]:not([data-daylight="noche"]) .product-topbar .simple-toggle {
  background: rgb(18 48 42 / 5%);
}
html[data-live-experience]:not([data-daylight="noche"]) .leaflet-control-zoom a:hover {
  background: rgb(15 138 108 / 14%);
  color: var(--mv-accent-deep);
}

/* ---------- lienzo del mapa ---------- */
html[data-live-experience]:not([data-daylight="noche"]) .map-workspace {
  background: var(--cv-canvas);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-layout .map-canvas {
  background: var(--cv-map-bg);
}
html[data-live-experience]:not([data-daylight="noche"])[data-discovery-view="map"] .product-layout #browse-controls {
  background: linear-gradient(180deg, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 28%) 72%, transparent);
}
html[data-live-experience]:not([data-daylight="noche"]) .leaflet-control-attribution {
  background: rgb(255 255 255 / 78%) !important; /* live-map.css lo fija con !important */
  color: var(--mv-muted) !important;
}
html[data-live-experience]:not([data-daylight="noche"]) .leaflet-control-attribution a {
  color: var(--mv-text) !important;
}
html[data-live-experience]:not([data-daylight="noche"]) .leaflet-tooltip {
  background: var(--mv-glass-deep);
}
html[data-live-experience]:not([data-daylight="noche"]) .leaflet-tooltip-top::before {
  border-top-color: var(--mv-glass-deep);
}

/* Pines: el nombre en tinta oscura sobre una pastilla blanca, como en la maqueta. */
html[data-live-experience]:not([data-daylight="noche"]) .map-marker__label {
  border-color: rgb(18 48 42 / 10%);
  background: rgb(255 255 255 / 94%);
  color: var(--mv-text);
  font-weight: 500;
  box-shadow: 0 2px 8px rgb(18 48 42 / 18%);
}

/* ---------- farmacia, «Ver lista», cinta de hoy y barra inferior ---------- */
html[data-live-experience]:not([data-daylight="noche"]) .pharmacy-peek__body small {
  color: var(--mv-muted);
}
html[data-live-experience]:not([data-daylight="noche"]) .pharmacy-peek__live {
  color: var(--mv-accent);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-layout .map-results-button {
  border-color: rgb(15 138 108 / 45%);
  color: var(--mv-text);
}
/* Sin tinte de fondo: en la web la celda de la farmacia no llena la cinta y el tinte quedaba cortado. */
html[data-live-experience]:not([data-daylight="noche"]) .today-cell--live {
  background: transparent;
}
html[data-live-experience]:not([data-daylight="noche"]) .today-cell--live .today-cell__k {
  color: var(--mv-amber);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-layout .mobile-dock [aria-pressed="true"] {
  background: rgb(15 138 108 / 10%);
  color: var(--mv-accent);
}

/* ---------- estilo C, tramo 2: portada del teléfono (30/09/2026) ----------
 * Maqueta aprobada (caja 22): el mapa va de la cabecera a la barra inferior, los filtros forman una
 * sola fila y la farmacia de turno baja a una tarjeta a todo el ancho. Sólo CSS y sólo en la portada
 * (data-product-page="map"): ids, data-* y el orden del DOM que usan las pruebas no cambian. */
@media (max-width: 39.99rem) {
  /* «Hoy en Comuna de Arauco» repetía el territorio de la cabecera: sale de la vista y queda para
   * lectores de pantalla (es el título de la página). La cinta de hoy baja a la tarjeta de la farmacia.
   * Si las actividades están encendidas, su botón vive en esta tarjeta y la tarjeta se queda. */
  html[data-live-experience][data-product-page="map"]
    .product-heading:not(:has([data-open-live-activities]:not([hidden]))) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"] .today-strip {
    display: none;
  }
  /* Sin márgenes ni marco: el taller del mapa ya es flexible y ocupa todo el alto libre. */
  html[data-live-experience][data-product-page="map"] .product-layout > main {
    padding: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .map-workspace {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Una sola fila deslizable: conmutador, puertas, capas y «Más filtros». Los contenedores
   * intermedios se aplanan con display: contents para no tocar el HTML. */
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding-block: 10px 12px;
    padding-right: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    /* El borde derecho se desvanece: la fila sigue hacia Turismo y «Más filtros». */
    mask-image: linear-gradient(90deg, black calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 32px), transparent);
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls::-webkit-scrollbar {
    display: none;
  }
  html[data-live-experience][data-discovery-view="map"]
    .product-layout
    #browse-controls
    :is(.live-toolbar, .live-city-modes) {
    display: contents;
  }
  /* La barra de capas sigue oculta en «Ahora» (live-map.css): sólo se aplana fuera de ese modo. Con el id,
   * porque live-map.css le da a .layer-tabs su propio desplazamiento con #browse-controls. */
  html[data-live-experience]:not([data-live-mode="today"])[data-discovery-view="map"]
    .product-layout
    #browse-controls
    :is(.product-filter-bar, .layer-picker, .layer-tabs) {
    display: contents;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls :is(
      .live-mode-switch,
      .live-city-modes button,
      .layer-tabs button,
      .product-more-filters,
      .live-refresh
    ) {
    flex: none;
    min-height: 36px;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout .live-mode-switch button {
    min-height: 30px;
    padding-inline: 12px;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout .live-refresh {
    order: 9;
  }
  /* El estado («Consultando…», «Información incompleta») sigue anunciándose, pero no ocupa una fila. */
  html[data-live-experience][data-discovery-view="map"] .product-layout .live-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Farmacia de turno: tarjeta a todo el ancho sobre la atribución, con su horario; «Ver lista» encima,
   * a la derecha. */
  html[data-live-experience][data-discovery-view="map"] .pharmacy-peek {
    right: 10px;
    left: 10px;
    bottom: 36px;
    max-width: none;
    min-height: 58px;
    padding: 9px 12px;
    border-radius: 16px;
    background: var(--mv-glass-deep);
  }
  html[data-live-experience][data-discovery-view="map"] .pharmacy-peek__body small {
    display: block;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout .map-results-button,
  html[data-live-experience][data-discovery-view="map"]
    .map-workspace:has(.pharmacy-peek:not([hidden]))
    .map-results-button {
    bottom: calc(36px + 58px + 10px);
  }
}

/* ---------- estilo C, tramo 3: pines redondos con el nombre al lado (30/09/2026) ----------
 * Maqueta aprobada: círculo de color por capa con el icono blanco derecho (sin lágrima girada) y el
 * nombre en tinta con halo, sin pastilla. Los grupos de capas distintas son un círculo neutro con el
 * número (map-marker--mixed): antes tomaban el icono de la ficha más importante y un grupo de doce
 * fichas parecía doce farmacias. */
html[data-live-experience] {
  --cv-halo: rgb(255 255 255 / 96%);
}
html[data-live-experience] .map-marker__pin {
  width: 28px;
  height: 28px;
  margin-left: 10px;
  border-radius: 50%;
  border-width: 2px;
}
html[data-live-experience] .map-marker__pin > .ms {
  font-size: 15px;
  transform: none;
}
html[data-live-experience] .map-marker--selected .map-marker__pin,
html[data-live-experience] .map-marker--pharmacy .map-marker__pin {
  width: 34px;
  height: 34px;
  margin-left: 7px;
}
html[data-live-experience] .map-marker--selected .map-marker__pin > .ms,
html[data-live-experience] .map-marker--pharmacy .map-marker__pin > .ms {
  font-size: 18px;
}
html[data-live-experience] .map-marker__label {
  margin: 0 0 7px 5px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--mv-text);
  font-size: 11.5px;
  font-weight: 600;
  text-shadow: 0 0 2px var(--cv-halo), 0 0 4px var(--cv-halo), 0 0 7px var(--cv-halo);
}
html[data-live-experience]:not([data-daylight="noche"]) .map-marker__label {
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-live-experience][data-daylight="noche"] .map-marker__label {
  --cv-halo: rgb(5 10 14 / 95%);
  color: #f4f7f8;
}
html[data-live-experience] .map-marker--mixed .map-marker__cluster {
  background: var(--mv-text);
}
html[data-live-experience][data-daylight="noche"] .map-marker--mixed .map-marker__cluster {
  background: #2b3a4a;
}
html[data-live-experience] .map-marker--mixed .map-cluster-count {
  position: static;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
/* El pin redondo no gira: app.css y la animación de live-map.css giraban la lágrima -45° y el icono
 * quedaba en rombo. El nombre se centra en la altura del círculo. */
html[data-live-experience] .map-marker__pin {
  transform: none;
}
html[data-live-experience] .map-marker__label {
  align-self: flex-end;
}
html[data-live-experience] .map-marker--selected .map-marker__label,
html[data-live-experience] .map-marker--pharmacy .map-marker__label {
  margin-bottom: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-live-experience] .map-marker__pin {
    animation-name: cv-pin-drop;
  }
  html[data-live-experience] .map-marker:hover .map-marker__pin,
  html[data-live-experience] .map-marker:focus-within .map-marker__pin {
    transform: scale(1.14);
  }
}
@keyframes cv-pin-drop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Grupos: círculo de 36 px dentro de un área táctil de 48 px; el recuento de un grupo de una sola capa
 * va en una insignia fina. */
html[data-live-experience] .map-marker__cluster {
  width: 36px;
  height: 36px;
  border-width: 2px;
}
html[data-live-experience] .map-marker__cluster > .ms {
  color: #ffffff;
  font-size: 18px;
}
html[data-live-experience] .map-marker--cluster:not(.map-marker--mixed) .map-cluster-count {
  right: -7px;
  bottom: -5px;
  min-width: 18px;
  min-height: 18px;
  padding: 0 4px;
  border-width: 1.5px;
  background: var(--mv-text);
  font-size: 10.5px;
  font-weight: 600;
}
html[data-live-experience][data-daylight="noche"] .map-marker--cluster:not(.map-marker--mixed) .map-cluster-count {
  background: #2b3a4a;
}

/* ---------- estilo C, tramo 4: barra de tres destinos y menú claro (30/09/2026) ----------
 * Barra Mapa · Explorar · Guardados de la maqueta C1: «Buscar» sobraba (el buscador está siempre arriba)
 * y «Mi espacio» abría un módulo congelado. El menú deja el verde profundo por el papel claro de día,
 * con letra fina y la marca sin serifa; de noche sigue oscuro. */
html[data-live-experience] .product-layout .mobile-dock {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-live-experience] .product-layout .mobile-dock > * {
  font-size: 10.5px;
  font-weight: 500;
}
html[data-live-experience] .product-layout .mobile-dock .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
/* Activo como en la maqueta: sólo el color, sin pastilla. */
html[data-live-experience] .product-layout .mobile-dock > [aria-pressed="true"],
html[data-live-experience]:not([data-daylight="noche"]) .product-layout .mobile-dock [aria-pressed="true"] {
  background: transparent;
  color: var(--mv-accent);
}
html[data-live-experience] .product-brand strong {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-live-experience] .product-nav__links button {
  min-height: 42px;
  font-size: 13.5px;
  font-weight: 500;
}
html[data-live-experience] .product-nav__links button[aria-current="page"] {
  font-weight: 600;
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav {
  background: var(--cv-canvas);
  color: var(--mv-text);
  box-shadow: 0 10px 40px rgb(18 48 42 / 22%);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-brand,
html[data-live-experience]:not([data-daylight="noche"]) .product-brand strong,
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__links button {
  color: var(--mv-text);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-brand > .icon {
  border-color: var(--mv-line);
  background: #ffffff;
  color: var(--mv-accent);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-brand small,
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__label {
  color: var(--mv-muted);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__links button:hover:not(:disabled) {
  background: rgb(15 138 108 / 8%);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__links button[aria-current="page"] {
  background: rgb(15 138 108 / 10%);
  color: var(--mv-accent-deep);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__links button[aria-current="page"] .icon {
  color: var(--mv-accent);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__close {
  border-color: var(--mv-line);
  background: #ffffff;
  color: var(--mv-text);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__soon {
  border-top-color: var(--mv-line);
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__soon .product-nav__links button[data-coming-soon],
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__soon-note {
  color: rgb(18 48 42 / 42%);
}
/* Guardados del teléfono (y el cuadro de compartir, que usa la misma hoja): letra fina, vidrio de día y
 * oscuro de noche; en el teléfono sube desde abajo como las demás hojas. */
html[data-live-experience] .saved-sheet {
  padding: 18px;
  border: 1px solid var(--mv-line);
  border-radius: 20px;
  background: #ffffff;
  color: var(--mv-text);
  box-shadow: 0 16px 48px rgb(0 0 0 / 22%);
}
html[data-live-experience][data-daylight="noche"] .saved-sheet {
  background: #0e171c;
}
html[data-live-experience] .saved-sheet::backdrop {
  background: rgb(8 20 18 / 42%);
}
html[data-live-experience] .saved-sheet h2 {
  margin: 4px 0 0;
  color: var(--mv-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-live-experience] .saved-sheet p,
html[data-live-experience] .saved-sheet label {
  margin: 8px 0 0;
  color: var(--mv-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
html[data-live-experience] .saved-sheet button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--mv-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mv-text);
  font-size: 12.5px;
  font-weight: 500;
}
html[data-live-experience] .saved-sheet header > button {
  min-width: 0;
}
html[data-live-experience] #saved-list {
  gap: 0;
  margin-top: 12px;
}
html[data-live-experience] #saved-list li {
  padding: 4px 0;
  border-bottom-color: var(--mv-line-soft);
}
html[data-live-experience] #saved-list .saved-open {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
}
html[data-live-experience] #saved-list .saved-empty {
  padding: 10px 0 4px;
  border: 0;
  color: var(--mv-muted);
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 39.99rem) {
  html[data-live-experience] .saved-sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }
}
/* Menú: la tarjeta «¿Ofreces un servicio o tienes un local?» sin ningún botón disponible (recepción y
 * seguimiento cerrados en la V1) era una puerta cerrada con un aviso del sistema. Vuelve sola cuando la API
 * habilita uno. */
html[data-live-experience] #product-nav .contribution-card:not(:has(button:enabled:not([hidden]))) {
  display: none;
}

/* ---------- estilo C, tramo 5: Explorar, lista y mapa (maqueta C2, 30/09/2026) ----------
 * Turismo pasa a puerta: la pestaña cambia el ámbito en vez de sumar (P0 pantalla 06, P1 pantalla 03). En la
 * lista del teléfono y la tableta las puertas se ven como pestañas con recuento, a la derecha el conmutador
 * lista/mapa, los temas de turismo en chips finos, la primera ficha con foto como lugar destacado y el resto en
 * filas de 60 px. Sólo CSS sobre el marcado actual; la web ancha va en el tramo 7. */
html[data-live-experience] .live-city-modes [data-layer-count] {
  margin-left: -2px;
  color: var(--mv-muted);
  font-size: 11px;
  font-weight: 500;
}
html[data-live-experience] .live-city-modes [data-layer-count]:empty {
  display: none;
}
html[data-live-experience] .live-city-modes button[aria-pressed="true"] [data-layer-count] {
  color: inherit;
  opacity: 0.75;
}
@media (max-width: 67.99rem) {
  html[data-live-experience],
  html[data-live-experience] body,
  html[data-live-experience] .product-layout.app-shell {
    height: 100dvh;
    max-height: 100dvh;
  }
  /* Fila de pestañas: Servicios · Turismo a la izquierda, «Más filtros» y lista/mapa a la derecha. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #browse-controls {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0 8px;
    max-height: none;
    padding: 6px 16px 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--mv-line-soft);
    border-radius: 0;
    background: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls:has([data-toggle-filters][aria-expanded="true"]) {
    max-height: 45dvh;
    overflow-y: auto;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-toolbar {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]:not([data-live-mode="today"])
    .product-layout #browse-controls .product-filter-bar {
    display: contents;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    gap: 20px;
    margin: 0;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button {
    min-height: 40px;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--mv-muted);
    font-size: 14px;
    font-weight: 500;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button:hover {
    background: none;
    color: var(--mv-text);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button .icon {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button[aria-pressed="true"] {
    border-bottom-color: var(--mv-accent);
    background: none;
    color: var(--mv-text);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes [data-layer-count] {
    color: var(--mv-muted);
    opacity: 1;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .product-more-filters {
    order: 2;
    flex: none;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .product-more-filters span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls [data-view-controls-slot] {
    order: 3;
    flex: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--mv-line);
    border-radius: 999px;
    background: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--mv-muted);
    font-size: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls button > * {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls button::before {
    font: normal 18px/1 "Material Symbols Rounded";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls [data-result-view="list"] {
    order: -1;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls [data-result-view="list"]::before {
    content: "\E241" / "";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls [data-result-view="map"]::before {
    content: "\E55B" / "";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .browse-view-controls button[aria-pressed="true"] {
    background: var(--mv-text);
    color: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .layer-picker {
    order: 4;
    flex: 1 1 100%;
    min-width: 0;
    padding-bottom: 8px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout
    #browse-controls:not(:has([data-toggle-filters][aria-expanded="true"]))
    .layer-picker {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls #product-extra-filters {
    order: 5;
    flex: 1 1 100%;
    margin: 0 0 10px;
  }

  /* Un solo desplazamiento: la lista. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #results-panel {
    padding: 0 16px 16px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #results-panel .panel-heading {
    padding: 10px 0 2px;
    border: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #results-panel .panel-heading h2 {
    font-size: 14px;
    font-weight: 600;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #results-panel :is(.results-intro, .trust-cue) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #results-panel .result-summary {
    color: var(--mv-muted);
    font-size: 11.5px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #results-panel .content-degraded {
    margin: 8px 0 0;
    color: var(--mv-muted);
    font-size: 11.5px;
  }

  /* Temas de turismo: chips finos de 32 px; el activo en tinta con letra clara. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) {
    gap: 6px;
    min-height: 0;
    margin: 0 -16px;
    padding: 10px 16px 8px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes button {
    height: 32px;
    min-height: 32px;
    gap: 5px;
    padding: 0 12px;
    border: 1px solid var(--mv-line);
    border-radius: 999px;
    background: var(--live-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--mv-text);
    font-size: 12px;
    font-weight: 500;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes [data-theme-count]:not(:empty) {
    padding: 0;
    background: none;
    color: var(--mv-muted);
    font-size: 11px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes button[aria-pressed="true"] {
    border-color: var(--mv-text);
    background: var(--mv-text);
    color: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes button[aria-pressed="true"] [data-theme-count] {
    background: none;
    color: inherit;
    opacity: 0.7;
  }

  /* Filas finas: miniatura o icono de 60 px, antetítulo, título y localidad; a la derecha, el mapa o la flecha. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #catalog-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 9px 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--mv-line-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin: -30px 0 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--mv-line-soft);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo img {
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo :is(figcaption, .place-photo__unavailable) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo:has(img[hidden]) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__button {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 60px;
    padding: 0;
    border: 0;
    background: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 12px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon .icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card:has(> .place-photo img:not([hidden])) .catalog-card__icon {
    visibility: hidden;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__summary {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card :is(.source-badge, .state-badge) {
    min-height: 18px;
    padding: 0 7px 0 6px;
    font-size: 10px;
    font-weight: 600;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:not(:has(strong)) {
    margin: 0;
    color: var(--mv-accent);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__title {
    margin: 0;
    color: var(--mv-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) {
    display: block;
    margin: 0;
    color: var(--mv-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) small {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) small:first-child {
    display: block;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__meta:has(strong) small:first-child::before {
    content: "\E0C8" / "";
    margin-right: 3px;
    font: normal 13px/1 "Material Symbols Rounded";
    vertical-align: -2px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__icon--rentals ~ .catalog-card__body .catalog-card__meta:has(strong) small:first-child::before {
    content: "\E53E" / "";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__cta {
    grid-column: 3;
    margin: 0;
    color: var(--mv-muted);
    font-size: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__cta::after {
    content: "\E409" / "";
    font: normal 20px/1 "Material Symbols Rounded";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card:has(> .catalog-card__locate) .catalog-card__cta {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--mv-line);
    border-radius: 50%;
    background: none;
    color: var(--mv-accent);
    font-size: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate .icon {
    width: 18px;
    height: 18px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card--selected {
    background: color-mix(in srgb, var(--mv-accent) 8%, transparent);
    box-shadow: none;
  }

  /* Lugar destacado: la primera ficha con foto de la lista de turismo, a 196 px con el crédito arriba. */
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) {
    display: block;
    height: 196px;
    margin: 4px 0 8px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: rgb(6 12 14);
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) {
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) > a {
    position: absolute;
    inset: 0;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden]))::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(6 12 14 / 40%), transparent 26% 42%, rgb(6 12 14 / 80%));
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) figcaption {
    display: block;
    position: absolute;
    top: 10px;
    right: 58px;
    left: 14px;
    z-index: 2;
    padding: 0;
    background: none;
    color: rgb(255 255 255 / 88%);
    font-size: 9.5px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden]))
    figcaption :is(small, a) {
    color: inherit;
    font-size: inherit;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__button {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    max-height: 96px;
    min-height: 0;
    padding: 0 14px 12px;
    overflow: hidden;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    :is(.catalog-card__icon, .catalog-card__cta) {
    display: none;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__meta {
    order: 1;
    color: rgb(255 255 255 / 85%);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    .catalog-card__meta:has(strong) {
    order: 2;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    .catalog-card__meta:has(strong) small:first-child::before {
    content: "· ";
    margin: 0;
    font: inherit;
    vertical-align: baseline;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__title {
    order: 3;
    display: -webkit-box;
    flex: 1 1 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__summary {
    order: 4;
    display: -webkit-box;
    flex: 1 1 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: rgb(255 255 255 / 80%);
    font-size: 10.5px;
    line-height: 1.35;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    :is(.source-badge, .state-badge) {
    border-color: rgb(255 255 255 / 45%);
    background: rgb(6 12 14 / 35%);
    color: #ffffff;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__badges {
    order: 0;
    flex: 1 1 100%;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__locate {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    border: 0;
    background: rgb(6 12 14 / 42%);
    color: #ffffff;
  }
}
/* Sólo en el teléfono: allí el tramo 2 ya quita titular y cinta también en el mapa. En tableta seguían en el
 * mapa y, al pasar de la lista al mapa («Ver en el mapa»), el mapa cambiaba de tamaño en pleno vuelo al lugar y el
 * globo quedaba sin caja (e2e-layers a 768 px). */
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-heading:not(:has([data-open-live-activities]:not([hidden]))) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout :is(.today-strip, .map-results-button) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout > main {
    padding: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout .map-workspace {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--live-canvas);
  }
}
@media (min-width: 40rem) and (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #catalog-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > :not(.catalog-card) {
    grid-column: 1 / -1;
  }
  html[data-live-experience][data-discovery-view="list"] #tourism-themes:not([hidden])
    ~ #tourism-carousel[hidden]
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) {
    grid-column: 1 / -1;
    height: 240px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout :is(#browse-controls, #results-panel) {
    padding-inline: 24px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) {
    margin-inline: -24px;
    padding-inline: 24px;
  }
}
/* A 320 px caben las dos pestañas: menos hueco, letra de 13 px y sin recuento. */
@media (max-width: 21.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes {
    gap: 14px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button {
    font-size: 13px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes [data-layer-count] {
    display: none;
  }
}
/* Menú: la nota «Prototipo. Las fichas marcadas como ejemplo no son información vigente.» se ocultaba en la
 * leyenda del mapa sin fichas de ejemplo, pero seguía en el pie del menú. Mismo criterio; el pie, sin serifa. */
html[data-live-experience]:has([data-legend-sample][hidden]) .product-nav .demo-ribbon {
  display: none;
}
html[data-live-experience] .product-nav .demo-ribbon {
  font-family: inherit;
}

/* ---------- estilo C, tramo 6a: acciones y fechas de la ficha (C3, 30/09/2026) ----------
 * La llamada manda: barra fija al pie de la hoja con «Llamar» y su número visible,
 * «Cómo llegar» sólo con punto exacto, y guardar/compartir como botones redondos.
 * La nav de regreso que inserta detail-controller conserva su clase antigua y queda
 * fuera de la barra. Con el chat de feria o un campo enfocado la barra se suelta para
 * no tapar «Enviar». La cabecera con foto, la letra fina y la noche completa: caja 6b. */
html[data-live-experience] #detail-sheet {
  --cf-accent: var(--mv-accent-deep);
  --cf-accent-ink: #ffffff;
  --cf-link: var(--mv-accent-deep);
  --cf-hair: var(--live-border);
}
html[data-live-experience][data-daylight="noche"] #detail-sheet {
  --cf-accent: var(--mv-accent);
  --cf-accent-ink: #04211b;
  --cf-link: var(--mv-accent);
}
html[data-live-experience] #detail-sheet #detail-content {
  scroll-padding-bottom: 96px;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -1rem calc(-1rem - env(safe-area-inset-bottom));
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--live-border-soft);
  background: var(--live-canvas);
}
@media (max-width: 39.99rem) {
  html[data-live-experience] #detail-sheet #detail-content > .detail-dock {
    margin-inline: -0.75rem;
    padding-inline: 12px;
  }
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-actions--primary {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-action {
  flex: 0 1 auto;
  min-height: 44px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid var(--cf-hair);
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--cf-link);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-action:first-child {
  flex: 1 1 auto;
  min-width: 0;
  border-color: transparent;
  background: var(--cf-accent);
  color: var(--cf-accent-ink);
  box-shadow: none;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-action--phone {
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
html[data-live-experience] #detail-sheet #detail-content .detail-action__number {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.9;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-action--directions::before {
  font: 400 20px/1 "Material Symbols Rounded";
  content: "\E52E";
  content: "\E52E" / "";
}
html[data-live-experience] #detail-sheet
  #detail-content > .detail-dock .detail-action--phone + .detail-action--directions {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  gap: 0;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin: 0 0 0 auto;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal button {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--cf-hair);
  border-radius: 50%;
  background: var(--live-surface);
  color: var(--live-ink);
  font-size: 0;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal button::before {
  font: 400 20px/1 "Material Symbols Rounded";
  content: "\E866";
  content: "\E866" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-share-place]::before {
  content: "\E80D";
  content: "\E80D" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-save-place][aria-pressed="true"] {
  border-color: var(--cf-link);
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet:has(#detail-content .live-conversation) #detail-content > .detail-dock {
  position: static;
}
html[data-live-experience]
  #detail-sheet:has(#detail-content :is(input, textarea, select):focus) #detail-content > .detail-dock {
  position: static;
}
html[data-live-experience] #detail-sheet #detail-content .detail-actions--more,
html[data-live-experience] #detail-sheet #detail-content .detail-contact .detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-actions--more, .detail-contact) .detail-action {
  flex: 0 1 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--cf-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--cf-link);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
html[data-live-experience] #detail-sheet .detail-report {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--cf-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--cf-link);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- estilo C, tramo 6b: cabecera con foto, letra fina y noche de la ficha (C3, 30/09/2026) ----------
 * Se desplaza el diálogo y no #detail-content: la foto (absoluta respecto del diálogo), el título y el contenido
 * corren juntos. Con foto, la hoja sube desde 300 px con radio 22 y el crédito queda arriba a la izquierda; sin
 * foto, el icono de la capa (glifo y color del pin del mapa) acompaña al título. La barra de acciones queda al pie
 * aunque la ficha sea corta. Letra fina en rem, para que el modo simple la agrande; la emergencia, los trámites y
 * el aviso de salud conservan en modo simple su tamaño de 1rem (app.css). */
html[data-live-experience] #detail-sheet {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 96px;
}
html[data-live-experience] #detail-sheet #detail-content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  overflow: visible;
  padding: 14px 18px 0;
  gap: 12px;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock {
  margin: auto -18px 0;
  padding-inline: 18px;
}
@media (max-width: 39.99rem) {
  html[data-live-experience] #detail-sheet #detail-content {
    padding-inline: 16px;
  }
  html[data-live-experience] #detail-sheet #detail-content > .detail-dock {
    margin-inline: -16px;
    padding-inline: 12px;
  }
}
html[data-live-experience] #detail-sheet #detail-content > .detail-report {
  align-self: flex-start;
}
html[data-live-experience] #detail-sheet
  #detail-content > .detail-dock .detail-dock__personal [data-share-place]::before {
  content: "\E80D";
  content: "\E80D" / "";
}

/* Cabecera: antetítulo verde y título fino, sin la banda de color de la familia. */
html[data-live-experience] #detail-sheet .sheet-header {
  z-index: 3;
  min-height: 0;
  padding: 18px 68px 4px 18px;
  border: 0;
  background: var(--live-canvas);
}
html[data-live-experience] #detail-sheet #detail-type {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet #detail-title {
  margin-top: 4px;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #close-detail {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--live-border-soft);
  border-radius: 50%;
  background: var(--live-surface);
  color: var(--live-ink);
  box-shadow: 0 2px 8px rgb(0 0 0 / 14%);
}
html[data-live-experience] #detail-sheet #close-detail:hover {
  border-color: var(--cf-link);
  background: var(--live-surface);
  color: var(--cf-link);
}
@media (min-width: 40rem) {
  html[data-live-experience] #detail-sheet #close-detail {
    right: 26px;
  }
}

/* Sin foto: el icono de la capa, con el glifo y el color de su pin, a la izquierda del título. */
html[data-live-experience] #detail-sheet:not(:has(#detail-content > .place-photo--detail)) .sheet-header {
  padding-left: 76px;
}
html[data-live-experience] #detail-sheet:not(:has(#detail-content > .place-photo--detail)) .sheet-header::before {
  position: absolute;
  top: 18px;
  left: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--cf-family, var(--mv-accent-deep));
  color: #ffffff;
  font: 400 24px/1 "Material Symbols Rounded";
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  content: var(--cf-glyph, "\E0C8");
  content: var(--cf-glyph, "\E0C8") / "";
}
html[data-live-experience] #detail-sheet[data-family="pharmacy"] { --cf-family: #e5484d; --cf-glyph: "\E550"; }
html[data-live-experience] #detail-sheet[data-family="health"] { --cf-family: #f03e5b; --cf-glyph: "\F109"; }
html[data-live-experience] #detail-sheet[data-family="emergency"] { --cf-family: #e8590c; --cf-glyph: "\EA05"; }
html[data-live-experience] #detail-sheet[data-family="safety"] { --cf-family: #2f7df6; --cf-glyph: "\EF56"; }
html[data-live-experience] #detail-sheet:is([data-family="citizen"], [data-family="public_service"]) {
  --cf-family: #0d9488;
  --cf-glyph: "\E84F";
}
html[data-live-experience] #detail-sheet[data-family="services"] { --cf-family: #0369a1; --cf-glyph: "\E8F9"; }
html[data-live-experience] #detail-sheet:is([data-family="commerce"], [data-family="business"]) {
  --cf-family: #d9730d;
  --cf-glyph: "\E563";
}
html[data-live-experience] #detail-sheet[data-family="tourism"] { --cf-family: #8b5cf6; --cf-glyph: "\E3B0"; }
html[data-live-experience] #detail-sheet[data-family="places"] { --cf-family: #8b5cf6; --cf-glyph: "\E0C8"; }
html[data-live-experience] #detail-sheet[data-family="community"] { --cf-family: #db2777; --cf-glyph: "\F233"; }
html[data-live-experience] #detail-sheet[data-family="event"] { --cf-family: #16a34a; --cf-glyph: "\E24F"; }

/* Con foto: la foto ocupa la cabecera y la hoja sube sobre ella. */
html[data-live-experience] #detail-sheet:has(#detail-content > .place-photo--detail) .sheet-header {
  margin-top: 300px;
  padding-right: 18px;
  border-radius: 22px 22px 0 0;
}
html[data-live-experience] #detail-sheet:has(#detail-content > .place-photo--detail) #close-detail {
  border-color: transparent;
  background: rgb(6 12 14 / 50%);
  color: #ffffff;
  box-shadow: none;
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 330px;
  margin: 0;
  border-radius: 0;
  background: #0b1216;
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 58%), transparent);
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail .place-photo__link {
  display: block;
  height: 100%;
  color: #ffffff;
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
html[data-live-experience] #detail-sheet
  #detail-content > .place-photo--detail .place-photo__unavailable:not([hidden]) {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 24px;
  font-size: 0.8125rem;
  text-align: center;
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail figcaption {
  position: absolute;
  top: 16px;
  right: 72px;
  left: 16px;
  z-index: 1;
  padding: 0;
  background: none;
  color: #ffffff;
  font-size: 0.6875rem;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail figcaption > span {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail figcaption small {
  font-size: inherit;
}

/* Texto fino y secciones como filas con una línea fina, en vez de tarjetas. */
html[data-live-experience] #detail-sheet #detail-content .detail-status-row {
  gap: 6px;
  margin: 0;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > * {
  min-height: 24px;
  padding: 0 9px;
  font-size: 0.6875rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content .detail-summary {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .detail-section {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--live-border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-section h3 {
  gap: 6px;
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-sheet #detail-content .detail-section h3::before {
  width: 5px;
  height: 5px;
  background: var(--cf-link);
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-location, .detail-provenance) h3::before {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--cf-link);
  font: 400 15px/1 "Material Symbols Rounded";
  content: "\E0C8";
  content: "\E0C8" / "";
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance h3::before {
  content: "\E88E";
  content: "\E88E" / "";
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance {
  background: transparent;
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-data > div, .fact-list > li) {
  padding: 6px 0;
  border: 0;
  background: transparent;
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-data > div + div, .fact-list > li + li) {
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-data dt, .fact-list li > span) {
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-data dd, .fact-list li > strong) {
  font-size: 0.78125rem;
  font-weight: 400;
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .detail-section :is(p, li) {
  font-size: 0.78125rem;
  line-height: 1.5;
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-section, .public-place-sources) a:not([class]) {
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet #detail-content :is(.detail-visit-pending, .detail-related-credit) {
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-sheet #detail-content :is(.contact-unavailable, .sample-disclaimer) {
  font-size: 0.78125rem;
  background: var(--live-inset);
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .public-place-alert {
  background: var(--live-inset);
  color: var(--live-ink-soft);
}
html[data-live-experience]:not([data-simple-mode="true"]) #detail-sheet #detail-content .public-place-alert {
  font-size: 0.78125rem;
}

/* Turno: el ámbar C sólo para lo que ocurre ahora. */
html[data-live-experience] #detail-sheet #detail-content .service-window {
  padding: 12px 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #detail-sheet #detail-content .service-window[data-state="now"] {
  border-color: rgb(232 146 12 / 45%);
  background: rgb(232 146 12 / 10%);
}
html[data-live-experience] #detail-sheet #detail-content .service-window-state {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}
html[data-live-experience] #detail-sheet #detail-content .service-window[data-state="now"] .service-window-state {
  color: #9a5800;
}
html[data-live-experience][data-daylight="noche"] #detail-sheet #detail-content .service-window[data-state="now"]
  .service-window-state {
  color: var(--mv-amber);
}
html[data-live-experience] #detail-sheet
  #detail-content .service-window[data-state="now"] .service-window-state::before {
  background: var(--cv-now, #e8920c);
  box-shadow: 0 0 0 4px rgb(232 146 12 / 22%);
}
html[data-live-experience] #detail-sheet #detail-content .service-window-lead {
  font-size: 0.8125rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content .service-window-range {
  font-size: 0.71875rem;
}

/* Emergencia legible de día y de noche, con tokens de la hoja; el botón conserva 44 px. */
html[data-live-experience] #detail-sheet #detail-content .safety-emergency {
  gap: 10px;
  padding: 14px;
  border: 1px solid rgb(159 47 36 / 28%);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency__copy > span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
html[data-live-experience][data-daylight="noche"] #detail-sheet #detail-content .safety-emergency__copy > span {
  color: #ff9d8a;
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency h3 {
  margin: 2px 0 4px;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency h3::before {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency__copy strong {
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency__copy p {
  color: var(--live-ink-soft);
}
html[data-live-experience]:not([data-simple-mode="true"])
  #detail-sheet #detail-content .safety-emergency__copy strong {
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience]:not([data-simple-mode="true"]) #detail-sheet #detail-content .safety-emergency__copy p {
  font-size: 0.78125rem;
}
html[data-live-experience] #detail-sheet #detail-content .safety-emergency__action {
  min-height: var(--target, 44px);
  border-radius: 999px;
  font-weight: 600;
}
html[data-live-experience]:not([data-simple-mode="true"]) #detail-sheet #detail-content .safety-emergency__action {
  font-size: 0.8125rem;
}

/* Trámites: sin cajas blancas de noche; todos los canales con el mismo fondo y el verde de la hoja. */
html[data-live-experience] #detail-sheet #detail-content .public-procedure {
  border-color: var(--live-border);
  background: var(--live-surface);
}
html[data-live-experience] #detail-sheet #detail-content .public-procedure summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content .public-procedure[open] summary {
  border-color: var(--live-border-soft);
  background: var(--live-inset);
}
html[data-live-experience] #detail-sheet #detail-content .public-procedure__content {
  color: var(--live-ink-soft);
}
html[data-live-experience]:not([data-simple-mode="true"]) #detail-sheet #detail-content .public-procedure__content {
  font-size: 0.78125rem;
}
html[data-live-experience] #detail-sheet #detail-content .procedure-channel {
  border-color: var(--live-border);
  background: var(--live-inset);
  color: var(--cf-link);
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .procedure-channel--in-person {
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .procedure-source {
  color: var(--cf-link);
  font-weight: 600;
}

/* Cajas claras que de noche quedaban blancas: servicios, «Explora también» y «Más fotografías». */
html[data-live-experience] #detail-sheet #detail-content .public-place-services li {
  border-color: var(--live-border);
  background: var(--live-inset);
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related-place {
  border-color: var(--live-border);
  background: var(--live-surface);
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content .detail-related-place:hover {
  border-color: var(--cf-link);
  background: var(--live-inset);
}
html[data-live-experience] #detail-sheet #detail-content .detail-related-place > span > span {
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet #detail-content .detail-more-photos {
  border-color: var(--live-border);
  background: var(--live-surface);
  color: var(--live-ink);
}
html[data-live-experience] #detail-sheet #detail-content .detail-more-photos .place-photo {
  background: var(--live-inset);
}
html[data-live-experience] #detail-sheet #detail-content .detail-more-photos figcaption {
  color: var(--live-ink-soft);
}

/* Fuentes oficiales: nombre en tinta, autoridad en gris y enlace verde; de noche se leían tinta sobre tinta. */
html[data-live-experience] #detail-sheet #detail-content .public-place-sources {
  background: transparent;
}
html[data-live-experience] #detail-sheet #detail-content .public-place-sources > p {
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-sheet #detail-content .public-place-sources li {
  border-color: var(--live-border-soft);
}
html[data-live-experience] #detail-sheet #detail-content .public-place-sources li strong {
  color: var(--live-ink);
  font-size: 0.78125rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .public-place-sources li small {
  color: var(--live-ink-mute);
}
html[data-live-experience] #detail-sheet #detail-content .public-place-sources li a {
  color: var(--cf-link);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- estilo C, tramo 7: tableta y web ancha (maqueta C1, 30/09/2026) ----------
 * Hallazgo P1 (pantalla 06): en la web cabecera, titular, cinta y controles ocupaban media pantalla y la lista iba
 * en 330 px. Desde 40rem la portada suelta titular y cinta como el teléfono en ambas vistas (el mapa no cambia de
 * tamaño al pasar de la lista al mapa); la farmacia de turno sigue en su tarjeta sobre el mapa y Turismo se elige con
 * las pestañas del tramo 5. Desde 68rem: cabecera de una fila de 60 px, lista fina a la izquierda (380-400 px), mapa a
 * todo el alto, filtros en una fila flotante sobre el mapa y la ficha sobre la lista con el mapa a la vista. Sólo CSS:
 * ids, data-* y orden del DOM no cambian. La maqueta de producción (actividades cerradas) sólo se ve en la pila local
 * con COMING_SOON_ROUTES; el gate corre con actividades y conserva el titular. */

/* Con el titular fuera de la vista, sus botones tampoco reciben foco (en todos los anchos). */
html[data-live-experience][data-product-page="map"]
  .product-heading:not(:has([data-open-live-activities]:not([hidden]))) .product-heading__actions {
  display: none;
}
@media (min-width: 40rem) {
  html[data-live-experience][data-product-page="map"]
    .product-heading:not(:has([data-open-live-activities]:not([hidden]))) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"] .product-layout .today-strip {
    display: none;
  }
  html[data-live-experience][data-product-page="map"] .product-layout > main {
    padding: 0;
  }
  /* Con las actividades abiertas el titular se queda: conserva su margen en vez de pegarse a los bordes. */
  html[data-live-experience][data-product-page="map"] .product-layout .product-heading:has(
      [data-open-live-activities]:not([hidden])) {
    margin: 12px 16px 8px;
  }
  html[data-live-experience][data-product-page="map"] .product-layout .map-workspace {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (min-width: 68rem) {
  html[data-live-experience] {
    --cv-side: clamp(380px, 28vw, 400px);
    --cv-top: 60px;
  }
  /* En modo simple los controles miden 3.5rem: la cabecera crece con ellos y la ficha se corre lo mismo. */
  html[data-live-experience][data-simple-mode="true"] {
    --cv-top: 76px;
  }
  /* Cabecera de una fila y alto fijo: la ficha se abre justo debajo. El buscador medía 50 px; queda en 48, el alto
   * del selector de lugar, para que ambos compartan la misma línea (e2e-responsive compara su posición). */
  html[data-live-experience] .product-topbar.topbar {
    box-sizing: border-box;
    height: var(--cv-top);
    min-height: var(--cv-top);
    padding-block: 6px;
  }
  html[data-live-experience]:not([data-simple-mode="true"]) .product-topbar .product-search .map-search {
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
  }
  html[data-live-experience]:not([data-simple-mode="true"]) .product-topbar .product-search #catalog-query {
    height: 46px;
    min-height: 0;
  }
  /* El selector de lugar ya nombra el territorio: la marca no lo repite debajo (queda para lectores). */
  html[data-live-experience] .product-topbar .mv-brand small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* Lista fina de C2 en la columna web: las mismas reglas del tramo 5 (teléfono y tableta en «lista»), porque desde
 * 68rem la lista está siempre junto al mapa con data-discovery-view="map". Si cambia la lista del tramo 5, cambiar
 * también esta copia. */
@media (min-width: 68rem) {
  /* Un solo desplazamiento: la lista. */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #results-panel {
    padding: 0 16px 16px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #results-panel .panel-heading {
    padding: 10px 0 2px;
    border: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #results-panel .panel-heading h2 {
    font-size: 14px;
    font-weight: 600;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #results-panel :is(.results-intro, .trust-cue) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #results-panel .result-summary {
    color: var(--mv-muted);
    font-size: 11.5px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #results-panel .content-degraded {
    margin: 8px 0 0;
    color: var(--mv-muted);
    font-size: 11.5px;
  }

  /* Temas de turismo: chips finos de 32 px; el activo en tinta con letra clara. */
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes:not([hidden]) {
    gap: 6px;
    min-height: 0;
    margin: 0 -16px;
    padding: 10px 16px 8px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes button {
    height: 32px;
    min-height: 32px;
    gap: 5px;
    padding: 0 12px;
    border: 1px solid var(--mv-line);
    border-radius: 999px;
    background: var(--live-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--mv-text);
    font-size: 12px;
    font-weight: 500;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes [data-theme-count]:not(:empty) {
    padding: 0;
    background: none;
    color: var(--mv-muted);
    font-size: 11px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes button[aria-pressed="true"] {
    border-color: var(--mv-text);
    background: var(--mv-text);
    color: var(--live-canvas);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes button[aria-pressed="true"] [data-theme-count] {
    background: none;
    color: inherit;
    opacity: 0.7;
  }

  /* Filas finas: miniatura o icono de 60 px, antetítulo, título y localidad; a la derecha, el mapa o la flecha. */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #catalog-results {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 9px 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid var(--mv-line-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card > .place-photo {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    margin: -30px 0 0;
    overflow: hidden;
    border-radius: 12px;
    background: var(--mv-line-soft);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card > .place-photo img {
    width: 60px;
    height: 60px;
    object-fit: cover;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card > .place-photo :is(figcaption, .place-photo__unavailable) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card > .place-photo:has(img[hidden]) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__button {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    min-height: 60px;
    padding: 0;
    border: 0;
    background: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 12px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon .icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card:has(> .place-photo img:not([hidden])) .catalog-card__icon {
    visibility: hidden;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__summary {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card :is(.source-badge, .state-badge) {
    min-height: 18px;
    padding: 0 7px 0 6px;
    font-size: 10px;
    font-weight: 600;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:not(:has(strong)) {
    margin: 0;
    color: var(--mv-accent);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__title {
    margin: 0;
    color: var(--mv-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) {
    display: block;
    margin: 0;
    color: var(--mv-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) small {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta:has(strong) small:first-child {
    display: block;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__meta:has(strong) small:first-child::before {
    content: "\E0C8" / "";
    margin-right: 3px;
    font: normal 13px/1 "Material Symbols Rounded";
    vertical-align: -2px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__icon--rentals ~ .catalog-card__body .catalog-card__meta:has(strong) small:first-child::before {
    content: "\E53E" / "";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__meta strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__cta {
    grid-column: 3;
    margin: 0;
    color: var(--mv-muted);
    font-size: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__cta::after {
    content: "\E409" / "";
    font: normal 20px/1 "Material Symbols Rounded";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card:has(> .catalog-card__locate) .catalog-card__cta {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--mv-line);
    border-radius: 50%;
    background: none;
    color: var(--mv-accent);
    font-size: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate .icon {
    width: 18px;
    height: 18px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view]
    .product-layout #catalog-results > .catalog-card--selected {
    background: color-mix(in srgb, var(--mv-accent) 8%, transparent);
    box-shadow: none;
  }

  /* Lugar destacado: la primera ficha con foto de la lista de turismo, a 196 px con el crédito arriba. */
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) {
    display: block;
    height: 196px;
    margin: 4px 0 8px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    background: rgb(6 12 14);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) {
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) > a {
    position: absolute;
    inset: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden]))::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(6 12 14 / 40%), transparent 26% 42%, rgb(6 12 14 / 80%));
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden])) figcaption {
    display: block;
    position: absolute;
    top: 10px;
    right: 58px;
    left: 14px;
    z-index: 2;
    padding: 0;
    background: none;
    color: rgb(255 255 255 / 88%);
    font-size: 9.5px;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child > .place-photo:has(img:not([hidden]))
    figcaption :is(small, a) {
    color: inherit;
    font-size: inherit;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__button {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    max-height: 96px;
    min-height: 0;
    padding: 0 14px 12px;
    overflow: hidden;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    :is(.catalog-card__icon, .catalog-card__cta) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__meta {
    order: 1;
    color: rgb(255 255 255 / 85%);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    .catalog-card__meta:has(strong) {
    order: 2;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    .catalog-card__meta:has(strong) small:first-child::before {
    content: "· ";
    margin: 0;
    font: inherit;
    vertical-align: baseline;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__title {
    order: 3;
    display: -webkit-box;
    flex: 1 1 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__summary {
    order: 4;
    display: -webkit-box;
    flex: 1 1 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: rgb(255 255 255 / 80%);
    font-size: 10.5px;
    line-height: 1.35;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden]))
    :is(.source-badge, .state-badge) {
    border-color: rgb(255 255 255 / 45%);
    background: rgb(6 12 14 / 35%);
    color: #ffffff;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__badges {
    order: 0;
    flex: 1 1 100%;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] #tourism-themes:not([hidden])
    ~ #catalog-results > .catalog-card:first-child:has(> .place-photo img:not([hidden])) .catalog-card__locate {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    border: 0;
    background: rgb(6 12 14 / 42%);
    color: #ffffff;
  }
}
@media (min-width: 68rem) {
  /* Taller: lista a la izquierda y mapa a todo el alto, en «mapa» y en «lista» (en la web no hay conmutador). */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout .map-workspace {
    display: grid;
    position: relative;
    grid-template-columns: var(--cv-side) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: none;
    flex: 1 1 auto;
    height: auto;
    min-height: 300px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #map-panel {
    grid-column: 2;
    grid-row: 1;
    min-height: 300px;
  }
  /* live-map.css fija la barra flotante con display: flex !important; en la web el panel es una columna. */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #results-panel {
    display: block !important;
    position: static;
    grid-column: 1;
    grid-row: 1;
    inset: auto;
    max-width: none;
    max-height: none;
    height: 100%;
    min-height: 0;
    padding: 4px 20px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    border: 0;
    border-right: 1px solid var(--mv-line);
    border-radius: 0;
    background: var(--live-surface);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    .map-workspace:has(.pharmacy-peek:not([hidden])) #results-panel {
    max-width: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #catalog-results {
    min-height: auto;
    padding-bottom: 0;
    overflow: visible;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #tourism-themes:not([hidden]) {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  /* Filtros: una fila sobre la columna del mapa, a la derecha del zoom: modo, pestañas, «Más filtros» y
   * «Actualizar» (sólo el icono). El panel de «Más filtros» baja a su propia línea. «Actualizar» se ve al final de
   * la fila pero conserva su lugar en el orden de tabulación, como en el teléfono (tramo 2). */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    .map-workspace > #browse-controls {
    position: absolute;
    grid-column: 2;
    grid-row: 1;
    inset: 0 0 auto 0;
    z-index: 1250;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
    max-height: 64%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 12px 10px 64px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, rgb(5 10 14 / 58%) 0%, rgb(5 10 14 / 22%) 72%, transparent);
    pointer-events: none;
  }
  html[data-live-experience]:not([data-daylight="noche"])[data-product-page="map"][data-discovery-view]
    .product-layout .map-workspace > #browse-controls {
    background: linear-gradient(180deg, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 28%) 72%, transparent);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    .map-workspace > #browse-controls > * {
    pointer-events: auto;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .live-toolbar {
    display: contents;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .live-mode-switch {
    flex: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .live-city-modes {
    order: 1;
    flex: none;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .product-filter-bar {
    order: 2;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 8px;
    min-width: 8rem;
    margin: 0;
    padding: 0;
    border: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .layer-picker {
    flex: 1 1 0;
    min-width: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .product-more-filters {
    flex: none;
    margin-left: auto;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .live-refresh {
    order: 3;
    flex: none;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls :is(.live-refresh span, .live-status, .layer-picker__heading) {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls #product-extra-filters {
    order: 4;
    flex: 1 1 100%;
    margin: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls :is(.live-city-modes button, .product-more-filters, .live-refresh) {
    min-height: 36px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #browse-controls .live-city-modes button {
    height: 36px;
  }
  /* En la columna, las tarjetas son filas: sin el vidrio de la barra flotante. */
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #results-panel :is(.panel-heading h2, .result-summary) {
    color: var(--mv-text);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout
    #results-panel .catalog-card__button {
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--mv-text);
  }

  /* El rótulo de zona quedaba bajo la fila de filtros; el selector de la cabecera ya nombra el lugar. */
  html[data-live-experience][data-discovery-view] .product-layout #map-zone-status {
    display: none;
  }
  /* Un globo del mapa queda sobre la fila de filtros también en «lista», como ya ocurre en «mapa». */
  html[data-live-experience][data-discovery-view] .product-layout .map-stage:has(.leaflet-popup) {
    z-index: 1350;
  }

  /* La ficha abre sobre la lista, del mismo ancho y bajo la cabecera: el mapa queda a la vista, sin velo, y
   * tocarlo cierra la ficha (detail-controller.js cierra al tocar fuera de la hoja). */
  html[data-live-experience] #detail-sheet {
    width: var(--cv-side);
    height: calc(100dvh - var(--cv-top));
    max-height: none;
    margin: var(--cv-top) auto 0 0;
    border-radius: 0;
    border-right: 1px solid var(--mv-line);
  }
  html[data-live-experience] #detail-sheet::backdrop {
    background: transparent;
  }
  html[data-live-experience] #detail-sheet #close-detail {
    top: calc(var(--cv-top) + 12px);
    right: auto;
    left: calc(var(--cv-side) - 64px);
  }
  /* En 380-400 px la orientación de emergencia va en una columna, como en el teléfono. */
  html[data-live-experience] #detail-sheet #detail-content .safety-emergency {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-live-experience] #detail-sheet #detail-content .safety-emergency__action {
    width: 100%;
    white-space: normal;
  }
}

/* ---------- estilo C, sueltas: modo simple en el menú del teléfono (30/09/2026) ----------
 * En el teléfono la cabecera no tiene sitio para «Aa» (live-map.css lo oculta bajo 40rem): el modo simple se
 * ofrece como una entrada más del menú. Desde 40rem sigue en la cabecera. */
html[data-live-experience] .product-nav__links .product-nav-simple {
  display: none;
}
@media (max-width: 39.99rem) {
  html[data-live-experience] .product-nav__links .product-nav-simple {
    display: flex;
  }
}
html[data-live-experience] .product-nav-simple__glyph {
  flex: none;
  width: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
html[data-live-experience] .product-nav__links .product-nav-simple[aria-pressed="true"] .product-nav-simple__glyph {
  color: var(--mv-accent);
}

/* ---------- estilo C, caja 48: fuentes, licencias y privacidad en el pie del menú (30/09/2026) ----------
 * Un desplegable discreto al final del menú. Letra fina y apagada; los títulos de cada bloque en mayúsculas
 * chicas con el acento. El modo simple lo agranda con el resto del menú. */
html[data-live-experience] .product-nav__footer {
  font-family: inherit;
  font-size: 12px;
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__footer {
  color: var(--mv-muted);
}
html[data-live-experience] .product-nav-about {
  margin: 4px 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mv-muted);
}
html[data-live-experience] .product-nav-about summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-muted);
}
html[data-live-experience] .product-nav-about summary::-webkit-details-marker {
  display: none;
}
html[data-live-experience] .product-nav-about summary::after {
  content: "+";
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
html[data-live-experience] .product-nav-about[open] summary::after {
  content: "−";
}
html[data-live-experience] .product-nav-about summary:focus-visible {
  outline: 2px solid var(--mv-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
html[data-live-experience] .product-nav-about__body .product-nav-about__title {
  margin: 10px 0 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mv-accent);
}
html[data-live-experience] .product-nav-about__body p {
  margin: 0 0 6px;
  font-size: 12px;
}
html[data-live-experience] .product-nav-about a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html[data-live-experience][data-simple-mode="true"] .product-nav-about,
html[data-live-experience][data-simple-mode="true"] .product-nav-about__body p {
  font-size: 14px;
}
html[data-live-experience][data-simple-mode="true"] .product-nav-about summary {
  font-size: 12px;
}
html[data-live-experience][data-simple-mode="true"] .product-nav-about__body .product-nav-about__title {
  font-size: 11.5px;
}

/* ---------- estilo C, cajas 10-12: comercios (30/09/2026) ----------
 * Tarjeta «¿Ofreces un servicio o tienes un local?» del menú, solicitud (alta y reclamo), seguimiento,
 * ficha de negocio, «Mi negocio» y página de ofertas con la piel C: de día papel frío, tarjetas blancas
 * de línea fina, tinta verde bosque y acento verde golfo; de noche el vidrio oscuro (los dos diálogos,
 * Mi negocio y las ofertas seguían claros). Letra fina en rem para que el modo simple la agrande; los
 * campos quedan en 16 px como mínimo (ADR-006). Un solo anillo de foco, verde: el ámbar es de «ahora».
 * Píldoras de 40 px y campos de 44 px medidos desde --target: el modo simple conserva blancos mayores.
 * Sólo CSS: ids, data-*, textos y orden del DOM no cambian, nada se oculta y ningún texto que las
 * pruebas leen con innerText pasa a mayúsculas. Los !important sólo responden a los de app.css 7424,
 * 7429 y 7434-7435 (pestaña activa, chip pulsado y banda de la tarjeta de ofertas). */

/* Tintas compartidas (mismos nombres que el tramo 6a): día y atardecer aquí, noche en la regla siguiente. */
html[data-live-experience] :is(#product-nav .contribution-card, #detail-sheet, #submission-dialog,
  #tracking-dialog, #business-manager, #ofertas) {
  --cf-accent: var(--mv-accent-deep);
  --cf-accent-ink: #ffffff;
  --cf-link: var(--mv-accent-deep);
  --cf-hair: var(--live-border);
  --cf-tint: rgb(15 138 108 / 8%);
  --cf-tint-line: rgb(15 138 108 / 28%);
  --cf-ring: rgb(11 110 86 / 30%);
  /* Borde de campo con 3:1 frente al papel (WCAG 1.4.11); las líneas finas siguen en --live-border-soft. */
  --cf-field: #7f8f89;
  --cf-soft: var(--mv-muted);
}
html[data-live-experience][data-daylight="noche"] :is(#product-nav .contribution-card, #detail-sheet,
  #submission-dialog, #tracking-dialog, #business-manager, #ofertas) {
  --cf-accent: var(--mv-accent);
  --cf-accent-ink: #04211b;
  --cf-link: var(--mv-accent);
  --cf-tint: rgb(25 195 161 / 10%);
  --cf-tint-line: rgb(25 195 161 / 30%);
  --cf-ring: rgb(25 195 161 / 36%);
  --cf-field: rgb(255 255 255 / 36%);
}
/* El texto suelto de la página de ofertas va sobre el degradado de día (termina en #dbe5ee), donde
 * --mv-muted quedaba en 4,2:1. */
html[data-live-experience]:not([data-daylight="noche"]) #ofertas {
  --cf-soft: #465b54;
}

/* ---- Tarjeta del menú ----
 * Blanca de día y vidrio de noche (el degradado de live-map.css iba de blanco a marino y el título verde
 * oscuro no se leía). Una columna en todo ancho: el cajón mide 330 px. No se fija display: la regla del
 * tramo 4 que la oculta sin botones disponibles sigue mandando. */
html[data-live-experience] #product-nav .contribution-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px 16px;
  border: 1px solid var(--mv-line);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  box-shadow: none;
  color: var(--mv-text);
}
html[data-live-experience]:not([data-daylight="noche"]) #product-nav .contribution-card {
  background: var(--live-surface);
  box-shadow: 0 1px 3px rgb(18 48 42 / 6%);
}
html[data-live-experience] #product-nav .contribution-card h3 {
  color: var(--mv-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #product-nav .contribution-card p {
  margin: 4px 0 0;
  color: var(--mv-muted);
  font-size: 0.71875rem;
  line-height: 1.5;
}
html[data-live-experience] #product-nav .contribution-card__actions {
  grid-column: 1 / -1;
  width: 100%;
  gap: 8px;
}

/* ---- Píldoras compartidas: 40 px (calc sobre --target, que el modo simple sube), 13 px y contorno fino ---- */
html[data-live-experience] #product-nav .contribution-card__actions > button,
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership button,
html[data-live-experience] :is(#submission-dialog, #tracking-dialog)
  :is(.primary-button, .secondary-button, .danger-button),
html[data-live-experience] #business-manager button,
html[data-live-experience] #ofertas :is(.space-page-heading > button,
  .household-fields > .household-actions > button, .household-fields > .household-empty > button,
  .marketplace-card-body > button, .marketplace-detail .household-actions > button,
  .marketplace-saved > button, .marketplace-saved > .household-actions > button,
  .marketplace-search button[type="submit"]),
html[data-live-experience] #ofertas > [data-saved-action="login"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: calc(var(--target) - 0.5rem);
  padding: 6px 16px;
  border: 1px solid var(--cf-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--cf-link);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  box-shadow: none;
}
/* :where() no suma especificidad: el botón principal conserva su relleno al pasar el puntero. */
html[data-live-experience] #product-nav .contribution-card__actions > button:where(:hover:not(:disabled)),
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership button:where(:hover:not(:disabled)),
html[data-live-experience] :is(#submission-dialog, #tracking-dialog)
  :is(.primary-button, .secondary-button, .danger-button):where(:hover:not(:disabled)),
html[data-live-experience] #business-manager button:where(:hover:not(:disabled)),
html[data-live-experience] #ofertas :is(.space-page-heading > button,
  .household-fields > .household-actions > button, .household-fields > .household-empty > button,
  .marketplace-card-body > button, .marketplace-detail .household-actions > button,
  .marketplace-saved > button, .marketplace-saved > .household-actions > button):where(:hover:not(:disabled)),
html[data-live-experience] #ofertas > [data-saved-action="login"]:where(:hover:not(:disabled)) {
  border-color: var(--cf-link);
  background: var(--cf-tint);
}
/* Un solo relleno por vista: el principal en verde golfo (de día el profundo, 6,2:1 con blanco). */
html[data-live-experience] #product-nav .contribution-card__actions > button:first-child,
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .primary-button,
html[data-live-experience] #business-manager button.primary-button,
html[data-live-experience] #ofertas :is(.marketplace-card-body > .household-primary,
  .marketplace-search button[type="submit"],
  .marketplace-detail .household-actions > [data-market-action="business"]) {
  border-color: transparent;
  background: var(--cf-accent);
  color: var(--cf-accent-ink);
  font-weight: 600;
}
/* Deshabilitado permanente (recepción cerrada): contorno discontinuo y tinta apagada; con opacidad el
 * verde seguía pareciendo disponible. Los deshabilitados de un instante (envío en curso) no cambian. */
html[data-live-experience] #product-nav .contribution-card__actions > button:disabled,
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership button:disabled {
  border-style: dashed;
  border-color: var(--live-border-strong);
  background: transparent;
  color: var(--mv-muted);
  opacity: 1;
}

/* ---- Foco: un anillo verde de 2 px (live-map.css pone ámbar de 3 px en toda la app) ---- */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog, #business-manager, #ofertas) :focus-visible,
html[data-live-experience] #product-nav .contribution-card :focus-visible,
html[data-live-experience] #detail-sheet
  #detail-content > :is(.detail-ownership, .business-verification-requirements) :focus-visible {
  outline: 2px solid var(--cf-link);
  outline-offset: 2px;
}
/* Títulos que reciben el foco por programa (lectores de pantalla): no son controles, sin recuadro. */
html[data-live-experience] :is(#submission-review-title, #submission-success-title, #tracking-title,
  #tracking-result-title, #marketplace-title):focus {
  outline: none;
}
html[data-live-experience] :is(#submission-error, #tracking-error, #tracking-result-error):focus-visible {
  outline-color: var(--live-alert);
}

/* ---- Campos: línea fina, fondo de tarjeta y 16 px como mínimo (heredan la letra fina del contenedor y
 * iOS acercaría la vista, ADR-006) ---- */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .form-field :is(input, select, textarea),
html[data-live-experience] #business-manager :is(input:not([type="checkbox"], [type="file"]), select, textarea),
html[data-live-experience] #ofertas .marketplace-search :is(input, select) {
  min-height: calc(var(--target) - 0.25rem);
  padding: 8px 12px;
  border: 1px solid var(--cf-field);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: max(16px, 1rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
  box-shadow: none;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .form-field textarea {
  min-height: 6.5rem;
}
/* Un solo anillo (antes borde azul de app.css más contorno ámbar de live-map.css). El contorno
 * transparente reaparece en colores forzados, donde la sombra no se dibuja. */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog)
  .form-field :is(input, select, textarea):focus,
html[data-live-experience] #business-manager
  :is(input:not([type="checkbox"], [type="file"]), select, textarea):focus,
html[data-live-experience] #ofertas .marketplace-search :is(input, select):focus {
  border-color: var(--cf-link);
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--cf-ring);
}
html[data-live-experience]
  :is(#submission-dialog, #tracking-dialog, #business-manager, #ofertas .marketplace-search)
  :is(input, textarea)::placeholder {
  color: var(--live-ink-mute);
  opacity: 1;
}
/* Selector de archivo: el botón nativo (gris de noche por color-scheme: dark) pasa a píldora secundaria. */
html[data-live-experience] :is(#tracking-dialog, #business-manager) input[type="file"] {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mv-muted);
  font-size: 0.8125rem;
}
html[data-live-experience] :is(#tracking-dialog, #business-manager) input[type="file"]::file-selector-button {
  min-height: 2.25rem;
  margin-inline-end: 10px;
  padding: 0 14px;
  border: 1px solid var(--cf-hair);
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--cf-link);
  font: 500 0.8125rem/1 var(--font-sans);
  cursor: pointer;
}

/* ---- Diálogos: papel de la hoja y vidrio oscuro de noche (app.css usaba --offwhite e --ink-* fijos) ---- */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog, #business-manager) {
  border-color: var(--live-border-soft);
  background: var(--live-canvas);
  color: var(--mv-text);
  font-size: 0.8125rem;
  line-height: 1.5;
  accent-color: var(--cf-accent);
  box-shadow: var(--live-shadow-lg);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog, #business-manager) :is(h2, h3, h4) {
  color: var(--mv-text);
}
/* Cabecera opaca y más baja: con el 96 % de app.css la fila de pasos y los datos se leían bajo el título
 * al desplazarse («el título pisa la fila de pasos»). Cierre redondo de 40 px como en la ficha. */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-handle {
  margin: 8px auto 2px;
  background: var(--live-border-strong);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-header {
  align-items: center;
  gap: 12px;
  padding: 10px 1rem 12px;
  border-block-end: 1px solid var(--live-border-soft);
  background: var(--live-canvas);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-header .icon-button {
  flex: none;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--live-border-soft);
  border-radius: 50%;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-header .icon-button:hover {
  border-color: var(--cf-link);
  background: var(--live-surface);
  color: var(--cf-link);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-header .icon-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}
/* Antetítulos: 10 px en mayúsculas espaciadas y en verde. */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .eyebrow,
html[data-live-experience] #business-manager .business-manager__header small,
html[data-live-experience] #ofertas .space-page-heading .eyebrow {
  margin: 0 0 4px;
  color: var(--cf-link);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* Títulos de hoja y de página: 21 px/650, sin serifa. */
html[data-live-experience] :is(#submission-title, #tracking-title, #business-manager-title, #marketplace-title) {
  margin: 0;
  color: var(--mv-text);
  font-family: var(--font-sans);
  font-size: 1.3125rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Rótulos de grupo: 10 px en mayúsculas y gris. Sólo textos que ninguna prueba lee con innerText. */
html[data-live-experience] #submission-dialog :is(.contact-consent > legend, .claim-target > span),
html[data-live-experience] #business-manager :is(h4:not([data-offer-title]), .business-manager__plan small,
  .promotion-products > legend),
html[data-live-experience] #ofertas :is(.promotion-detail h4, .marketplace-detail > aside > h2) {
  color: var(--mv-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* Estado en píldora corta: tinta sobre superficie en ambas fases (de noche «Pendiente de revisión» daba
 * 1,9:1 sobre el papel claro). Sin mayúsculas: las pruebas comparan su innerText. */
html[data-live-experience] #tracking-dialog #tracking-status-label,
html[data-live-experience] #submission-dialog .review-card .state-badge {
  justify-self: start;
  min-height: 1.5rem;
  padding: 0 10px;
  border-color: var(--live-border);
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
html[data-live-experience] #tracking-dialog #tracking-status-label::before,
html[data-live-experience] #submission-dialog .review-card .state-badge::before {
  background: var(--cf-link);
}
/* Errores en el tono de aviso de la fase: de noche dejaban una caja rosada sobre la hoja oscura. */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-error {
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--live-alert-tint);
  color: var(--live-alert);
  font-size: 0.78125rem;
  font-weight: 500;
}
/* Campos de los dos diálogos: rótulo de 12 px/600 en tinta y ayuda de 11,5 px en gris, sin negrita. */
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .form-field {
  gap: 6px;
  margin-block-start: 14px;
  color: var(--mv-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .form-field small {
  color: var(--mv-muted);
  font-size: 0.71875rem;
  font-weight: 400;
  line-height: 1.45;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-review-list {
  gap: 0;
  margin: 10px 0;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-review-list > div {
  gap: 2px 12px;
  padding-block: 7px;
  border-block-end: 1px solid var(--live-border-soft);
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-review-list > div:last-child {
  border-block-end: 0;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-review-list dt {
  color: var(--mv-muted);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] :is(#submission-dialog, #tracking-dialog) .submission-review-list dd {
  color: var(--mv-text);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---- Solicitud (#submission-dialog): pasos 1-3, revisión y comprobante, en alta y en reclamo ---- */
html[data-live-experience] #submission-dialog {
  /* Arriba la cabecera compacta y abajo la barra de botones: el campo centrado no queda bajo ninguna. */
  scroll-padding-block: 6rem 7.5rem;
}
html[data-live-experience] #submission-dialog > .progress-steps {
  gap: 6px;
  margin-block: 12px;
}
html[data-live-experience] #submission-progress li {
  min-height: 2rem;
  padding: 0 2px 6px;
  gap: 6px;
  border-block-end: 2px solid var(--live-border);
  color: var(--mv-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
}
html[data-live-experience] #submission-progress li > span {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  border: 1px solid var(--live-border);
  background: transparent;
  color: var(--mv-muted);
  font-size: 0.625rem;
  font-weight: 600;
}
html[data-live-experience] #submission-progress li[aria-current="step"] {
  border-block-end-color: var(--cf-accent);
  color: var(--mv-text);
  font-weight: 600;
}
html[data-live-experience] #submission-progress li[aria-current="step"] > span {
  border-color: transparent;
  background: var(--cf-accent);
  color: var(--cf-accent-ink);
}
html[data-live-experience] #submission-progress li:has(~ li[aria-current="step"]) {
  border-block-end-color: var(--cf-tint-line);
}
html[data-live-experience] #submission-progress li:has(~ li[aria-current="step"]) > span {
  border-color: var(--cf-tint-line);
  background: var(--cf-tint);
  color: var(--cf-link);
}
@media (max-width: 22.49rem) {
  /* A 320 px el número va sobre el rótulo: «Información» no cabía al lado y se partía. */
  html[data-live-experience] #submission-progress li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
html[data-live-experience] #submission-form {
  gap: 16px;
}
/* Cada paso sin tarjeta: la leyenda deja de montarse sobre el borde y queda como título fino. */
html[data-live-experience] #submission-dialog .publish-step {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-live-experience] #submission-dialog .publish-step > legend {
  margin: 0;
  padding: 0;
  color: var(--mv-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #submission-dialog .field-help {
  margin: 4px 0 0;
  color: var(--mv-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}
/* Casillas y autorizaciones: texto liviano; los avisos legales, en tarjeta de línea fina. */
html[data-live-experience] #submission-dialog .check-field {
  min-height: calc(var(--target) - 0.5rem);
  gap: 10px;
  margin-block-start: 10px;
  color: var(--mv-text);
  font-size: 0.78125rem;
  font-weight: 400;
  line-height: 1.45;
}
html[data-live-experience] #submission-dialog .check-field input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 1px 0 0;
  accent-color: var(--cf-accent);
}
html[data-live-experience] #submission-dialog .check-field--notice {
  margin-block-start: 12px;
  padding: 10px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-muted);
  font-size: 0.75rem;
}
html[data-live-experience] #submission-dialog .contact-consent {
  min-width: 0;
  margin-block-start: 16px;
  padding: 4px 12px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
  background: var(--live-inset);
}
html[data-live-experience] #submission-dialog .contact-consent > legend {
  padding-inline: 6px;
}
html[data-live-experience] #submission-dialog .contact-consent > .form-field {
  margin-block-start: 8px;
}
html[data-live-experience] #submission-dialog .contact-consent > p:not(.field-error) {
  margin: 12px 0 0;
  color: var(--mv-muted);
  font-size: 0.75rem;
}
html[data-live-experience] #submission-dialog .field-error {
  margin-block-start: 6px;
  color: var(--live-alert);
  font-size: 0.75rem;
  font-weight: 600;
}
/* Reclamo, posible duplicado y honestidad: tarjetas de línea fina con los tokens de la hoja. */
html[data-live-experience] #submission-dialog :is(.claim-target, .duplicate-warning, .submission-honesty) {
  margin-block-start: 12px;
  padding: 10px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] #submission-dialog .claim-target strong {
  color: var(--mv-text);
  font-size: 0.875rem;
  font-weight: 600;
}
/* Duplicado: una línea verde a la izquierda (el naranja anterior se confundía con el ámbar de «ahora»). */
html[data-live-experience] #submission-dialog .duplicate-warning {
  box-shadow: inset 3px 0 0 var(--cf-link);
}
html[data-live-experience] #submission-dialog .duplicate-warning strong {
  font-weight: 600;
}
html[data-live-experience] #submission-dialog .duplicate-warning p {
  margin: 4px 0 10px;
  color: var(--mv-muted);
  font-size: 0.75rem;
}
html[data-live-experience] #submission-dialog .submission-honesty {
  border-color: var(--cf-tint-line);
  background: var(--cf-tint);
  color: var(--mv-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
html[data-live-experience] #submission-dialog .submission-honesty strong {
  color: var(--mv-text);
  font-weight: 600;
}
/* Revisar: tarjeta de línea fina; los datos, en filas con el valor en tinta. */
html[data-live-experience] #submission-dialog .review-card {
  margin-block: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] #submission-dialog .review-card__badges {
  margin-block-end: 8px;
}
html[data-live-experience] #submission-dialog .review-card h4 {
  margin: 0 0 2px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #submission-dialog .review-card > p {
  margin: 0;
  color: var(--mv-muted);
  font-size: 0.78125rem;
}
html[data-live-experience] #submission-dialog .review-card > p strong {
  color: var(--mv-text);
  font-weight: 600;
}
/* Barra de botones opaca al pie de la hoja. */
html[data-live-experience] #submission-dialog .flow-actions {
  gap: 8px;
  padding: 10px 1rem calc(10px + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--live-border-soft);
  background: var(--live-canvas);
  backdrop-filter: none;
}
@media (max-width: 39.99rem) {
  /* «Volver» y «Continuar» comparten fila; app.css los apilaba a todo el ancho bajo 24rem (375 px). */
  html[data-live-experience] #submission-dialog .flow-actions {
    flex-wrap: nowrap;
  }
  html[data-live-experience] #submission-dialog .flow-actions > * {
    width: auto;
    min-width: 0;
  }
  html[data-live-experience] #submission-dialog .flow-actions > .primary-button {
    flex: 1 1 auto;
  }
}
/* Comprobante: icono tenue, código en tinta con borde discontinuo verde. */
html[data-live-experience] #submission-dialog > .submission-success {
  gap: 8px;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom));
  color: var(--mv-muted);
}
html[data-live-experience] #submission-dialog .submission-success strong {
  color: var(--mv-text);
  font-weight: 600;
}
html[data-live-experience] #submission-dialog .submission-success__icon {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--cf-tint);
  box-shadow: inset 0 0 0 1px var(--cf-tint-line);
  color: var(--cf-link);
}
html[data-live-experience] #submission-dialog .submission-success__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}
/* La cabecera repite el título del cuerpo (submission-flow.js:545 lo copia). Sin tocar el JS, el del
 * cuerpo se lee como estado, en píldora con punto verde, y no como un segundo título. Sin mayúsculas. */
html[data-live-experience] #submission-dialog #submission-success-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 1.75rem;
  padding: 4px 12px;
  border: 1px solid var(--cf-tint-line);
  border-radius: 14px;
  background: var(--cf-tint);
  color: var(--mv-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #submission-dialog #submission-success-title::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--cf-link);
}
html[data-live-experience] #submission-dialog .submission-success output {
  padding: 10px 12px;
  border: 1px dashed var(--cf-link);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
/* La clave privada conserva la letra monoespaciada y la alineación de app.css. */
html[data-live-experience] #submission-dialog #submission-tracking-token {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
}
html[data-live-experience] #submission-dialog .submission-success .dialog-actions {
  gap: 8px;
  padding-block: 8px 0;
}
/* Un solo relleno: «Consultar o verificar» queda verde y «Cerrar» pasa a contorno. */
html[data-live-experience] :is(#submission-success, #tracking-result)
  .dialog-actions > .primary-button[data-close-dialog] {
  border-color: var(--cf-hair);
  background: transparent;
  color: var(--cf-link);
  font-weight: 500;
}
html[data-live-experience] :is(#submission-success, #tracking-result)
  .dialog-actions > .primary-button[data-close-dialog]:hover:not(:disabled) {
  border-color: var(--cf-link);
  background: var(--cf-tint);
}

/* ---- Seguimiento (#tracking-dialog) ---- */
html[data-live-experience] #tracking-dialog :where(.tracking-form > p, .tracking-result > p,
  .phone-verification-form > p, #tracking-withdraw-confirm > p, .claim-evidence p) {
  margin: 0;
  color: var(--mv-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
html[data-live-experience] #tracking-dialog :is(#tracking-result-title, .tracking-result h4) {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #tracking-dialog :is(.tracking-form, .phone-verification-form) > .form-field {
  margin-block-start: 0;
}
/* Datos en dos columnas con línea fina: en una columna, cinco filas empujaban las acciones fuera. */
html[data-live-experience] #tracking-dialog .tracking-result__details {
  margin: 0;
}
html[data-live-experience] #tracking-dialog .tracking-result__details > div {
  grid-template-columns: minmax(6.5rem, 0.7fr) minmax(0, 1.3fr);
  align-items: baseline;
}
/* Alta, correcciones y antecedente: secciones con una línea fina (la última fila de datos ya no la dobla). */
html[data-live-experience] #tracking-dialog .claim-evidence {
  display: grid;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #tracking-dialog .claim-evidence .submission-actions {
  gap: 8px;
  margin-top: 2px;
}
html[data-live-experience] #tracking-dialog :is(#claim-evidence-status, #profile-corrections-state):not(:empty) {
  padding: 9px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] #tracking-dialog #claim-evidence-form > label {
  color: var(--mv-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
/* Los botones sueltos de cada panel quedan del ancho de su texto en vez de ocupar toda la fila. */
html[data-live-experience] #tracking-dialog :is(.claim-evidence > button, .claim-evidence form > button,
  .phone-verification-form > button, .withdraw-panel > button) {
  justify-self: start;
}
/* Teléfono: tarjeta con el tinte del acento (de noche ya no queda verde claro); retiro: sección con línea. */
html[data-live-experience] #tracking-dialog .phone-verification-form {
  gap: 10px;
  padding: 14px;
  border-color: var(--cf-tint-line);
  border-radius: 16px;
  background: var(--cf-tint);
}
html[data-live-experience] #tracking-dialog .withdraw-panel {
  gap: 10px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--live-border-soft);
  border-radius: 0;
  background: transparent;
}
html[data-live-experience] #tracking-dialog #tracking-withdraw-confirm {
  padding: 12px 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
}
/* Acciones en una fila (secundaria a la izquierda, principal a la derecha) que baja si no cabe. */
html[data-live-experience] #tracking-dialog .dialog-actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-live-experience] #tracking-dialog .dialog-actions > button {
  flex: 1 1 9rem;
  width: auto;
}
/* Peligro en el rojo de aviso de la fase: contorno, y relleno sólo en «Confirmar retiro». */
html[data-live-experience] #tracking-dialog .danger-button {
  border-color: var(--live-alert);
  color: var(--live-alert);
}
html[data-live-experience] #tracking-dialog .danger-button:where(:hover:not(:disabled)) {
  background: var(--live-alert-tint);
}
html[data-live-experience] #tracking-dialog #tracking-withdraw-submit {
  border-color: transparent;
  background: var(--live-alert);
  color: var(--live-canvas);
}

/* ---- Mi negocio (#business-manager; #account-panel comparte sus clases y no cambia) ---- */
html[data-live-experience] #business-manager {
  overscroll-behavior: contain;
  scroll-padding-top: 5rem;
}
/* Cabecera fija en top: 0 y a todo el ancho: con top: -32px de app.css el antetítulo se cortaba. */
html[data-live-experience] #business-manager .business-manager__shell {
  padding: 0 clamp(16px, 3vw, 28px) 24px;
}
html[data-live-experience] #business-manager .business-manager__header {
  top: 0;
  flex-wrap: nowrap;
  margin: 0 calc(-1 * clamp(16px, 3vw, 28px)) 12px;
  padding: 14px clamp(16px, 3vw, 28px) 10px;
  border-bottom: 1px solid var(--live-border-soft);
  background: var(--live-canvas);
}
html[data-live-experience] #business-manager .business-manager__header > div {
  flex: 1 1 auto;
}
html[data-live-experience] #business-manager .business-manager__header small {
  display: block;
}
html[data-live-experience] #business-manager [data-manager-close] {
  flex: none;
}
/* Letra: 13 px de lectura, títulos de tarjeta de 14 px/600 y rótulos de campo de 12 px/600. */
html[data-live-experience] #business-manager h3 {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #business-manager h4 {
  margin: 14px 0 6px;
}
html[data-live-experience] #business-manager h4[data-offer-title] {
  margin: 8px 0 4px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #business-manager p {
  margin: 0 0 10px;
  line-height: 1.55;
}
html[data-live-experience] #business-manager :is(.business-manager__login, [data-manager-catalog] details,
  [data-contact-form], [data-product-sharing], [data-promotion-root], [data-promotion-editor],
  [data-promotion-state], [data-promotion-form]) > p,
html[data-live-experience] #business-manager [data-manager-empty] {
  color: var(--mv-muted);
}
html[data-live-experience] #business-manager :is(.business-manager__hint, .promotion-products > p,
  [data-profile-history], [data-contact-history], [data-profile-original]) {
  color: var(--mv-muted);
  font-size: 0.71875rem;
}
html[data-live-experience] #business-manager label {
  gap: 6px;
  margin: 12px 0;
  color: var(--mv-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #business-manager .business-manager__check {
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
}
html[data-live-experience] #business-manager .promotion-products label {
  margin: 0;
  font-weight: 500;
}
/* Formularios en rejilla de 12 px: la rejilla de 1rem más el margen de cada etiqueta dejaba 48 px. */
html[data-live-experience] #business-manager
  :is([data-promotion-form], [data-profile-form], [data-contact-form]) > label,
html[data-live-experience] #business-manager .business-manager__actions label {
  margin: 0;
}
html[data-live-experience] #business-manager
  :is([data-promotion-form], [data-profile-form], [data-contact-form]) {
  gap: 12px;
}
html[data-live-experience] #business-manager :is(.business-manager__actions, .business-manager__list-title) {
  justify-content: flex-start;
  gap: 8px;
}
html[data-live-experience] #business-manager .business-manager__list-title h3 {
  flex: 1 1 auto;
  margin: 0;
}
/* Catálogo y promociones guardadas: filas finas en tinta, no píldoras. */
html[data-live-experience] #business-manager ul {
  gap: 6px;
  margin: 12px 0;
}
html[data-live-experience] #business-manager li > button {
  display: grid;
  justify-content: stretch;
  gap: 2px;
  width: 100%;
  min-height: calc(var(--target) - 0.25rem);
  padding: 10px 14px;
  border-color: var(--live-border-soft);
  border-radius: 14px;
  background: var(--live-surface);
  color: var(--mv-text);
  text-align: left;
}
html[data-live-experience] #business-manager li > button:where(:hover:not(:disabled)) {
  border-color: var(--cf-link);
}
html[data-live-experience] #business-manager li > button strong {
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #business-manager li span {
  color: var(--mv-muted);
  font-size: 0.71875rem;
}
/* Estado: línea verde a la izquierda sobre un tinte suave. */
html[data-live-experience] #business-manager [data-manager-status]:not(:empty) {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--cf-link);
  border-radius: 0 12px 12px 0;
  background: var(--cf-tint);
  color: var(--mv-text);
}
html[data-live-experience] #business-manager .business-manager__login {
  margin: 4px auto 0;
}
/* Plan: tarjeta de línea fina; «1 de 10 productos publicados» pasa de 20 px en negrita a 13 px/600. */
html[data-live-experience] #business-manager .business-manager__plan {
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #business-manager .business-manager__plan small {
  display: block;
}
html[data-live-experience] #business-manager .business-manager__plan h3 {
  margin: 4px 0 2px;
}
html[data-live-experience] #business-manager .business-manager__plan strong {
  display: block;
  color: var(--cf-link);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #business-manager .business-manager__plan p {
  margin: 4px 0 0;
  color: var(--mv-muted);
  font-size: 0.71875rem;
  line-height: 1.5;
}
/* Ficha, contactos, planes y promociones: tarjetas de línea fina con «+» y «−» como el pie del menú. */
html[data-live-experience] #business-manager [data-manager-catalog] > details {
  margin: 0 0 10px;
  padding: 0 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #business-manager [data-manager-catalog] > details[open] {
  padding-bottom: 12px;
}
html[data-live-experience] #business-manager [data-manager-catalog] > .business-manager__promotions {
  margin-top: 16px;
}
html[data-live-experience] #business-manager [data-manager-catalog] > details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--target) - 0.25rem);
  padding: 8px 0;
  color: var(--mv-text);
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
html[data-live-experience] #business-manager [data-manager-catalog] > details > summary::-webkit-details-marker {
  display: none;
}
html[data-live-experience] #business-manager [data-manager-catalog] > details > summary::after {
  margin-left: auto;
  color: var(--cf-link);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  content: "+";
  content: "+" / "";
}
html[data-live-experience] #business-manager [data-manager-catalog] > details[open] > summary::after {
  content: "−";
  content: "−" / "";
}
html[data-live-experience] #business-manager [data-manager-catalog] > details details > summary {
  min-height: calc(var(--target) - 0.5rem);
  padding: 8px 0;
  color: var(--cf-link);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}
html[data-live-experience] #business-manager :is([data-profile-comparison], [data-contact-comparison]) > div {
  padding: 10px 0;
  border-bottom-color: var(--live-border-soft);
}
html[data-live-experience] #business-manager
  :is([data-profile-comparison], [data-contact-comparison]) > div p:last-child {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--cf-tint);
  color: var(--mv-text);
}
/* Producto y Ofrezco: datos como filas cortas (rótulo gris, valor en tinta). */
html[data-live-experience] #business-manager .business-manager__workspace {
  gap: 20px;
  margin-top: 16px;
}
html[data-live-experience] #business-manager [data-product-sharing] {
  margin-top: 16px;
  padding-top: 14px;
  border-top-color: var(--live-border-soft);
}
html[data-live-experience] #business-manager [data-product-sharing] > h4 {
  margin-top: 0;
}
html[data-live-experience] #business-manager [data-offer-fields] {
  margin: 8px 0 10px;
}
html[data-live-experience] #business-manager [data-offer-fields] dt {
  color: var(--mv-muted);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #business-manager [data-offer-fields] dd {
  margin: 1px 0 8px;
  color: var(--mv-text);
  font-weight: 500;
}
html[data-live-experience] #business-manager :is([data-offer-photo], [data-product-photo]) {
  border-radius: 14px;
}
html[data-live-experience] #business-manager .promotion-products {
  margin: 0;
  padding: 6px 12px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
}
html[data-live-experience] #business-manager .promotion-products > legend {
  padding: 0 4px;
}

/* ---- Detalle de promoción (renderPromotionData): igual en Mi negocio y en la página de ofertas ---- */
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail {
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .household-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cf-tint);
  color: var(--cf-link);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .promotion-state {
  margin: 0 0 12px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--cf-link);
  background: transparent;
  color: var(--mv-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .promotion-price {
  gap: 2px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--cf-tint);
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-price strong {
  color: var(--mv-text);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-price span {
  color: var(--mv-muted);
  font-size: 0.75rem;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-price b {
  color: var(--cf-link);
  font-size: 0.75rem;
  font-weight: 600;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail h4 {
  margin: 16px 0 6px;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail ul {
  display: block;
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: 0.8125rem;
  line-height: 1.5;
}
/* Datos como en la ficha (tramo 6b): filas con línea fina, rótulo en tinta y valor en gris. */
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .detail-data {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .detail-data > div {
  grid-template-columns: minmax(6.5rem, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 6px 0;
  border: 0;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .detail-data > div + div {
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .detail-data dt {
  color: var(--mv-text);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail .detail-data dd {
  color: var(--mv-muted);
  font-size: 0.78125rem;
  font-weight: 400;
}
html[data-live-experience] :is(#business-manager, #ofertas) .promotion-detail > p:last-child {
  margin: 14px 0 0;
  color: var(--mv-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ---- Página de ofertas (#ofertas): lista, detalle y vacío; guardadas y avisos comparten la cabecera ----
 * Seguía con la v08: títulos con serifa, pestañas lila con texto café, crema cálido y, de noche, tinta
 * verde sobre el lienzo oscuro con cajas blancas. No se fija color en #ofertas: avisos y preferencias
 * tienen tarjetas blancas propias y de noche quedarían con tinta clara sobre blanco. */
html[data-live-experience] #ofertas :is(h1, h2, h3, h4) {
  font-family: var(--font-sans);
}
html[data-live-experience] #ofertas .space-page-heading {
  gap: 12px;
  margin-bottom: 14px;
}
html[data-live-experience] #ofertas #marketplace-title {
  margin-bottom: 6px;
}
html[data-live-experience] #ofertas .space-page-heading p:not(.eyebrow) {
  color: var(--cf-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}
/* Pestañas: subrayado verde como las puertas de Explorar, sin caja ni lila. */
html[data-live-experience] #ofertas .marketplace-tabs {
  gap: 18px;
  width: auto;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--live-border-soft);
  border-radius: 0;
  background: transparent;
}
html[data-live-experience] #ofertas .marketplace-tabs button {
  flex: none;
  gap: 6px;
  min-height: calc(var(--target) - 0.5rem);
  padding: 0 0 2px;
  border-radius: 0;
  color: var(--cf-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
html[data-live-experience] #ofertas .marketplace-tabs button:focus-visible {
  outline-offset: -2px;
}
html[data-live-experience] #ofertas .marketplace-tabs button:where(:hover) {
  color: var(--mv-text);
}
/* app.css 7424 pinta la activa con background !important: sólo así se reemplaza. El subrayado va en
 * sombra interior porque app.css 7423 fija border: 0 !important. */
html[data-live-experience] #ofertas .marketplace-tabs [aria-current="page"] {
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--mv-accent);
  color: var(--mv-text);
  font-weight: 600;
}
html[data-live-experience] #ofertas .marketplace-tabs svg {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 46rem) {
  /* En el teléfono la fila se desliza y se desvanece a la derecha: antes cortaba «Guardadas» sin aviso. */
  html[data-live-experience] #ofertas .marketplace-tabs {
    padding-right: 24px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}
/* Estado y textos sueltos: 13 px legibles también de noche (antes #243c34 sobre el lienzo oscuro). */
html[data-live-experience] #ofertas > [data-market-status] {
  margin: 0 0 10px;
  color: var(--mv-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
}
html[data-live-experience] #ofertas > [data-market-status]:empty {
  margin: 0;
}
html[data-live-experience] #ofertas .household-fields > p {
  color: var(--cf-soft);
  font-size: 0.8125rem;
}
html[data-live-experience] #ofertas .marketplace-search {
  gap: 8px;
  margin-bottom: 10px;
}
html[data-live-experience] #ofertas .marketplace-search button[type="submit"] {
  min-height: calc(var(--target) - 0.25rem);
  padding-inline: 18px;
}
/* Filtros: chips de 32 px y 12 px; el pulsado en tinta, como los temas de Turismo. */
html[data-live-experience] #ofertas .marketplace-filters {
  gap: 6px;
  margin-bottom: 12px;
}
html[data-live-experience] #ofertas .marketplace-filters button {
  min-height: 2rem;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid var(--live-border);
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: 0.75rem;
  font-weight: 500;
}
html[data-live-experience] #ofertas .marketplace-filters button:where(:hover:not(:disabled)) {
  border-color: var(--cf-link);
}
/* app.css 7429 fija fondo y borde del chip pulsado con !important. */
html[data-live-experience] #ofertas .marketplace-filters [aria-pressed="true"] {
  border-color: var(--mv-text) !important;
  background: var(--mv-text) !important;
  color: var(--live-canvas);
}
html[data-live-experience] #ofertas .marketplace-filters [data-market-action="clear"] {
  border-color: transparent;
  background: transparent;
  color: var(--cf-link);
}
html[data-live-experience] #ofertas .marketplace-filters svg {
  width: 0.875rem;
  height: 0.875rem;
}
html[data-live-experience] #ofertas .marketplace-results {
  margin-bottom: 10px;
  color: var(--cf-soft);
  font-size: 0.71875rem;
}
/* Tarjetas: papel blanco de día y superficie oscura de noche, con letra fina. */
html[data-live-experience] #ofertas .marketplace-grid {
  gap: 12px;
}
html[data-live-experience] #ofertas .marketplace-card {
  border: 1px solid var(--live-border-soft);
  background: var(--live-surface);
  color: var(--mv-text);
  box-shadow: 0 1px 2px rgb(18 48 42 / 5%);
}
/* Banda de 120 px (antes 150) con un solo tinte verde para los tres tipos: el tipo lo dicen su rótulo y su
 * icono. app.css 7434-7435 la fija con !important. */
html[data-live-experience] #ofertas .marketplace-art {
  min-height: 7.5rem !important;
  background: var(--cf-tint) !important;
  color: var(--cf-link) !important;
}
/* La tarjeta recorta lo que sale de ella: el anillo de la banda va por dentro. */
html[data-live-experience] #ofertas .marketplace-art:focus-visible {
  outline-offset: -3px;
}
html[data-live-experience] #ofertas .marketplace-type {
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--cf-link);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
html[data-live-experience] #ofertas .marketplace-discount {
  top: 12px;
  right: 12px;
  min-height: 0;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}
html[data-live-experience] #ofertas .marketplace-discount small {
  font-size: 0.75rem;
  font-weight: 500;
}
html[data-live-experience] #ofertas .marketplace-product {
  bottom: 16px;
  border-radius: 18px;
  background: var(--live-surface);
  box-shadow: 0 4px 12px rgb(18 48 42 / 10%);
}
html[data-live-experience] #ofertas .marketplace-product svg {
  width: 2.5rem;
  height: 2.5rem;
}
html[data-live-experience] #ofertas .marketplace-card-body {
  gap: 8px;
  padding: 14px 16px 16px;
}
html[data-live-experience] #ofertas :is(.marketplace-merchant, .marketplace-card-body > small,
  .marketplace-price > span, .marketplace-availability) {
  color: var(--mv-muted);
  font-size: 0.71875rem;
}
html[data-live-experience] #ofertas
  :is(.marketplace-merchant, .marketplace-availability, .marketplace-results) svg {
  width: 0.875rem;
  height: 0.875rem;
}
html[data-live-experience] #ofertas .marketplace-card :is(h2, h3) {
  margin: 0;
  color: var(--mv-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #ofertas .marketplace-summary {
  margin: 0 0 4px;
  color: var(--mv-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
html[data-live-experience] #ofertas .marketplace-price strong {
  color: var(--mv-text);
  font-size: 1.125rem;
  font-weight: 600;
}
html[data-live-experience] #ofertas .marketplace-saving {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cf-tint);
  color: var(--cf-link);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #ofertas .marketplace-availability {
  gap: 6px;
  margin: 2px 0;
  padding: 10px 0;
  border-color: var(--live-border-soft);
}
html[data-live-experience] #ofertas
  :is(.marketplace-card-body, .household-actions) > [data-saved-action="toggle"][aria-pressed="true"] {
  border-color: var(--cf-link);
  background: var(--cf-tint);
}
/* Notas: filas con una línea fina en vez de tarjetas blancas. */
html[data-live-experience] #ofertas .marketplace-notes {
  gap: 12px 20px;
  margin-top: 18px;
}
html[data-live-experience] #ofertas .marketplace-notes section {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--live-border-soft);
  border-radius: 0;
  background: transparent;
}
html[data-live-experience] #ofertas .marketplace-notes h2 {
  margin: 0 0 4px;
  color: var(--mv-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #ofertas .marketplace-notes p {
  margin: 0;
  color: var(--cf-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}
/* Vacío: línea discontinua fina, título sans de 15 px. Sólo el que va sobre la página (los de avisos
 * dentro de tarjetas blancas no cambian). */
html[data-live-experience] #ofertas :is(.household-fields, .marketplace-saved) > .household-empty {
  padding: 24px 16px;
  border: 1px dashed var(--live-border-strong);
  border-radius: 16px;
  background: transparent;
  color: var(--cf-soft);
}
html[data-live-experience] #ofertas :is(.household-fields, .marketplace-saved) > .household-empty :is(h2, h3) {
  margin: 0 0 6px;
  color: var(--mv-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #ofertas :is(.household-fields, .marketplace-saved) > .household-empty p {
  max-width: 34ch;
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
}
html[data-live-experience] #ofertas .household-fields > .household-empty > button {
  margin-top: 14px;
}
html[data-live-experience] #ofertas .marketplace-saved > h2 {
  margin: 0 0 6px;
  color: var(--mv-text);
  font-size: 1rem;
  font-weight: 600;
}
html[data-live-experience] #ofertas .marketplace-saved > p {
  color: var(--cf-soft);
  font-size: 0.8125rem;
}
/* Detalle: tarjeta y aside en el papel de la ficha (antes blancos también de noche). */
html[data-live-experience] #ofertas .marketplace-detail {
  gap: 12px;
}
html[data-live-experience] #ofertas .marketplace-detail .promotion-detail {
  margin: 0;
  border-radius: 18px;
}
html[data-live-experience] #ofertas .marketplace-detail > aside {
  padding: 16px;
  border: 1px solid var(--live-border-soft);
  border-radius: 18px;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] #ofertas .marketplace-detail > aside > h2 {
  margin: 0 0 6px;
}
html[data-live-experience] #ofertas .marketplace-detail > aside > p {
  margin: 0 0 4px;
  color: var(--mv-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
html[data-live-experience] #ofertas .marketplace-detail > aside > h2 + p {
  color: var(--mv-text);
  font-size: 0.9375rem;
  font-weight: 600;
}
html[data-live-experience] #ofertas
  :is(.household-fields > .household-actions, .marketplace-detail .household-actions) {
  gap: 8px;
  margin: 12px 0;
}

/* ---- Ficha de negocio (#detail-sheet, sobre el tramo 6b) ---- */
/* Insignia «Negocio»: verde de la hoja; la tinta marina #0b3a63 de live-map.css no se leía de noche. */
html[data-live-experience] #detail-sheet #detail-content .detail-status-row .source-badge--business {
  border-color: var(--cf-tint-line);
  background: var(--cf-tint);
  color: var(--cf-link);
}
/* «Sin verificación documental · Ver requisitos»: fila desplegable fina; de noche era una caja blanca. */
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements {
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--live-border);
  border-radius: 14px;
  background: var(--live-surface);
  color: var(--live-ink-soft);
  font-size: 0.78125rem;
  line-height: 1.5;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements[open] {
  padding-bottom: 12px;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements summary {
  gap: 8px;
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #detail-sheet
  #detail-content > .business-verification-requirements summary::-webkit-details-marker {
  display: none;
}
html[data-live-experience] #detail-sheet
  #detail-content > .business-verification-requirements summary::after {
  margin-left: auto;
  color: var(--cf-link);
  font: 400 20px/1 "Material Symbols Rounded";
  content: "\E5CF";
  content: "\E5CF" / "";
}
html[data-live-experience] #detail-sheet
  #detail-content > .business-verification-requirements[open] summary::after {
  content: "\E5CE";
  content: "\E5CE" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements :is(p, ul) {
  margin: 6px 0 0;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements li strong {
  color: var(--live-ink);
  font-weight: 600;
}
/* «¿Eres responsable de este negocio?»: tarjeta fina; los dos botones oscuros a todo el ancho pasan a
 * píldoras de contorno ajustadas a su texto (reglas compartidas de arriba). */
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--live-border);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership > div {
  flex: 1 0 100%;
  min-width: 0;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership strong {
  display: block;
  color: var(--live-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership p {
  margin: 3px 0 0;
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
  line-height: 1.45;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-ownership button {
  flex: 0 1 auto;
  min-width: 0;
}
/* Productos del negocio: tarjetas de vidrio con letra fina; de noche la tarjeta seguía blanca. */
html[data-live-experience] #detail-sheet #detail-content .business-catalog > p {
  margin: 0 0 10px;
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
}
html[data-live-experience] #detail-sheet #detail-content .business-product-grid {
  gap: 10px;
}
html[data-live-experience] #detail-sheet #detail-content .business-product {
  border: 1px solid var(--live-border);
  border-radius: 16px;
  background: var(--live-surface);
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .business-product img {
  background: var(--live-inset);
}
html[data-live-experience] #detail-sheet #detail-content .business-product > div {
  display: grid;
  gap: 3px;
  padding: 12px 14px 14px;
}
html[data-live-experience] #detail-sheet #detail-content .business-product h4 {
  margin: 0;
  color: var(--live-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #detail-sheet #detail-content .business-product strong {
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .business-product__availability {
  margin: 0;
  color: var(--live-ink-mute);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content .business-product p {
  margin: 4px 0 0;
  color: var(--live-ink-soft);
  font-size: 0.78125rem;
  line-height: 1.5;
}
html[data-live-experience] #detail-sheet #detail-content .business-product small {
  margin-top: 4px;
  color: var(--live-ink-mute);
  font-size: 0.6875rem;
}
/* Categorías, servicios y horario heredaban #17353d del diálogo y de noche no se leían. :where() no suma
 * especificidad; data-family lo fija detail-controller.js antes de pintar la ficha. */
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section {
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section > ul:not(.fact-list) {
  margin: 0;
  padding-left: 1.1rem;
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section > ul:not(.fact-list) > li + li {
  margin-top: 8px;
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section > ul:not(.fact-list) > li::marker {
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section > ul:not(.fact-list) > li > strong {
  color: var(--live-ink);
  font-weight: 600;
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .detail-section > ul:not(.fact-list) > li > p {
  margin: 2px 0 0;
}
/* Datos útiles: sin el radio de app.css, la línea entre dos datos ya no se curva en los extremos. */
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content .fact-list > li {
  border-radius: 0;
}
/* «Contacto no publicado»: recuadro fino, sin márgenes de párrafo y con el rótulo en 600. */
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .contact-unavailable {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 12px;
  line-height: 1.5;
}
html[data-live-experience] #detail-sheet:where([data-family="commerce"], [data-family="services"],
  [data-family="business"]) #detail-content > .contact-unavailable strong {
  color: var(--live-ink);
  font-weight: 600;
}

/* ---- Modo simple, teléfono apaisado y anchos mayores ---- */
/* Modo simple: la lectura de los diálogos vuelve a 0,875 rem (≈ 16 px, como en app.css); rótulos, chips y
 * píldoras crecen solos con la raíz y con --target. */
html[data-live-experience][data-simple-mode="true"] :is(#submission-dialog, #tracking-dialog, #business-manager)
  :is(p:not(.eyebrow, .household-tag), .field-help, .form-field small, .check-field, .submission-error, dd) {
  font-size: 0.875rem;
}
/* Teléfono apaisado (app.css 7658-7664): cabecera de una línea y márgenes cortos, que las reglas con id
 * de arriba anulaban. */
@media (max-width: 67.99rem) and (max-height: 35rem) {
  html[data-live-experience] #submission-dialog {
    scroll-padding-block: 4.5rem 5.5rem;
  }
  html[data-live-experience] #submission-dialog > .sheet-header {
    padding-block: 8px;
  }
  html[data-live-experience] #submission-dialog #submission-title {
    font-size: 1.125rem;
  }
  html[data-live-experience] #submission-dialog > .progress-steps {
    margin-block: 8px;
  }
}
@media (min-width: 40rem) {
  html[data-live-experience] :is(#submission-dialog, #tracking-dialog) > .sheet-header {
    padding-inline: 1.25rem;
  }
  html[data-live-experience] #submission-dialog .flow-actions {
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
  }
}

/* ---------- hallazgo de comercios (30/09/2026): tres puertas en Explorar ----------
 * El tramo 5 se pensó para dos puertas (Servicios · Turismo). Con Comercios encendido la tercera quedaba cortada
 * («Co») a 375 px junto a «Más filtros» y lista/mapa. Con tres o más puertas visibles, los dos controles quedan
 * arriba a la derecha y las puertas en su propia fila, sobre la línea; con cuatro la fila se desliza y se
 * desvanece en el borde. Con dos puertas (la V1 sin comercios) nada cambia. */
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout
    #browse-controls:has(.live-city-modes > button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])) {
    justify-content: flex-end;
    row-gap: 2px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #browse-controls
    .live-city-modes:has(> button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])) {
    order: 4;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #browse-controls
    .live-city-modes:has(> button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])
      ~ button:not([hidden])) {
    padding-inline-end: 24px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}

/* ---------- hallazgos visuales (30/09/2026): textos que no se leían y partes cortadas ----------
 * El propietario: «veo algunas partes cortadas y textos que no se ven debido a los colores». Auditoría con
 * contraste medido (WCAG: 4,5:1 en letra chica) en lista, mapa, menú, ficha, alta, seguimiento, Mi negocio y
 * ofertas, de día y de noche, a 375 y 320 px. Sólo colores y medidas: textos, ids y data-* no cambian. */

/* Rótulos apagados de día (UBICACIÓN, CATEGORÍAS, FUENTE…): #647789 quedaba en 4,25:1 sobre el papel. */
html[data-live-experience]:not([data-daylight="noche"]) {
  --live-ink-mute: #5a6c7e;
}

/* Lista de noche: la insignia «Negocio» era tinta marina sobre azul marino (1,3:1); toma el verde de la ficha.
 * La nota «Consulta la fuente…» conservaba la caja blanca translúcida del día (2,6:1) y el recuadro del ícono
 * del negocio seguía celeste claro. */
html[data-live-experience][data-daylight="noche"] .source-badge--business {
  border-color: rgb(25 195 161 / 30%);
  background: rgb(25 195 161 / 10%);
  color: var(--mv-accent);
}
html[data-live-experience][data-daylight="noche"] .results-provenance {
  border-color: var(--mv-line-soft);
  background: rgb(255 255 255 / 6%);
  color: var(--mv-muted);
}
html[data-live-experience][data-daylight="noche"] .results-provenance .icon {
  color: var(--mv-muted);
}
html[data-live-experience][data-daylight="noche"] .catalog-card__icon--business {
  border-color: rgb(156 201 240 / 28%);
  background: rgb(15 76 129 / 28%);
  color: #9cc9f0;
}

/* Menú: «Letra y botones más grandes» iba en #bacdbc sobre el papel (1,5:1). «Próximamente» sumaba un color al
 * 42 % y la opacidad de botón deshabilitado (1,6:1 de día, 2,4:1 de noche): ahora se lee y sigue apagado. */
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__links button small {
  color: var(--mv-muted);
}
html[data-live-experience] .product-nav__soon .product-nav__links button[data-coming-soon] {
  opacity: 1;
}
html[data-live-experience] .product-nav__soon .product-nav__links button[data-coming-soon] small {
  color: inherit;
}
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__soon .product-nav__links
  button[data-coming-soon],
html[data-live-experience]:not([data-daylight="noche"]) .product-nav__soon-note {
  color: #62736d;
}
html[data-live-experience][data-daylight="noche"] .product-nav__soon .product-nav__links button[data-coming-soon],
html[data-live-experience][data-daylight="noche"] .product-nav__soon-note {
  color: #8d9ba1;
}
/* «Fuentes, licencias y privacidad»: títulos en el verde profundo (el de acento quedaba en 3,96:1 a 10 px). */
html[data-live-experience]:not([data-daylight="noche"]) .product-nav-about__body .product-nav-about__title {
  color: var(--mv-accent-deep);
}
/* Recuento de la puerta activa sobre el verde: la opacidad lo dejaba en 3,1:1; va entero, como el nombre. */
html[data-live-experience] .live-city-modes button[aria-pressed="true"] [data-layer-count] {
  opacity: 1;
}
/* Alta y reclamo: «No adjuntes documentos…» y «Resultado de este envío» quedaban en 4,48:1 sobre su tinte. */
html[data-live-experience]:not([data-daylight="noche"]) #submission-dialog .submission-honesty {
  color: #4b5f58;
}

/* Foto del producto entera: el teléfono la sube con su forma (apaisada o vertical, hasta 1024 px) y la franja
 * fija de 180 px con object-fit: cover le cortaba un 30 % o más. Una vertical se muestra completa con bandas. */
html[data-live-experience] #detail-sheet #detail-content .business-product img {
  display: block;
  height: auto;
  max-height: 300px;
  object-fit: contain;
}

/* Ofertas en el teléfono: las cuatro pestañas medían 490 px en 351 y «Productos del catálogo» quedaba cortada
 * bajo el desvanecido. Dos columnas a su medida: Descubrir · Avisos / Guardadas · Productos del catálogo. */
@media (max-width: 46rem) {
  html[data-live-experience] #ofertas .marketplace-tabs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    column-gap: 28px;
    row-gap: 0;
    padding-right: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- barra del mapa en el teléfono: dos filas, nada cortado (30/09/2026) ----------
 * La fila única deslizable medía 728 px en 375 (781 con «Más filtros») y la pantalla principal mostraba media
 * puerta «Servicios» bajo el desvanecido. Arriba el conmutador, con «Más filtros» y «Actualizar» a la derecha;
 * debajo las puertas, sin ícono, como en Explorar. Las dos filas siguen a la derecha del zoom, que no se mueve
 * del borde superior del mapa (e2e-responsive). Bajo 360 px no caben junto al zoom y queda la fila deslizable. */
@media (min-width: 22.5rem) and (max-width: 39.99rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls {
    flex-wrap: wrap;
    padding-left: 64px;
    /* 4 px: el panel cerrado de «Más filtros» mide 0 pero también suma separación. */
    column-gap: 4px;
    row-gap: 8px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-mode-switch {
    margin-right: auto;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-city-modes {
    display: flex;
    order: 20;
    flex: 1 0 100%;
    gap: 5px;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-city-modes:has(
      > button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-city-modes button {
    flex: 1 0 auto;
    justify-content: center;
    column-gap: 5px;
    padding-inline: 9px;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-city-modes .icon {
    display: none;
  }
}
/* 360–374 px (los Android de 360): conmutador y puertas más ceñidos para que cada fila quepa. */
@media (min-width: 22.5rem) and (max-width: 23.4rem) {
  html[data-live-experience][data-discovery-view="map"] .product-layout .live-mode-switch button {
    padding-inline: 9px;
  }
  html[data-live-experience][data-discovery-view="map"] .product-layout #browse-controls .live-city-modes button {
    padding-inline: 7px;
  }
}

/* ---------- ficha: franja de papel bajo la ✕ al desplazar (30/09/2026) ----------
 * #close-detail es fijo (tramo 6b) y la cabecera se va con el desplazamiento: el texto pasaba bajo la ✕
 * («Confirma pr✕y» a 375 px). Una franja pegajosa del color del papel, de 12 + 40 + 12 px, espera detrás de
 * la cabecera y se queda arriba al bajar: el texto se esconde bajo una línea horizontal, nunca al lado de la ✕.
 * Cuelga de #detail-content y no del diálogo, porque un toque cuyo destino es el diálogo cierra la ficha
 * (detail-controller.js). No ocupa sitio: sus márgenes anulan su alto y el gap de 12 px. La foto sube a z 2
 * para que la franja no pinte sus esquinas redondeadas; la cabecera (z 3, con la ✕ dentro) sigue encima.
 * Día, noche y modo simple comparten el --live-canvas del papel. Con foto, la cabecera vuelve a reservar
 * 68 px a la derecha: al desplazar, el final de un título largo también pasaba bajo la ✕. */
html[data-live-experience] #detail-sheet {
  --cf-close-band: calc(64px + env(safe-area-inset-top));
  scroll-padding-top: var(--cf-close-band);
}
html[data-live-experience] #detail-sheet #detail-content::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 1;
  flex: none;
  height: var(--cf-close-band);
  margin: calc(-1 * var(--cf-close-band)) -18px -12px;
  background: linear-gradient(var(--live-canvas) calc(100% - 12px), transparent);
}
@media (max-width: 39.99rem) {
  html[data-live-experience] #detail-sheet #detail-content::before {
    margin-inline: -16px;
  }
}
html[data-live-experience] #detail-sheet #detail-content > .place-photo--detail {
  z-index: 2;
}
html[data-live-experience] #detail-sheet:has(#detail-content > .place-photo--detail) .sheet-header {
  padding-right: 68px;
}

/* ---------- fichas de noche y direcciones enteras (30/09/2026) ----------
 * La tinta de las fichas de comercio y servicios se corrigió con data-family (sección «Categorías, servicios y
 * horario…»), pero turismo, bomberos, carabineros, biblioteca o la municipalidad seguían heredando #17353d del
 * diálogo: de noche, listas, horarios y párrafos quedaban en 1,4:1 sobre el papel oscuro. De noche toda sección
 * de ficha toma la tinta suave y sus negritas la tinta plena; de día no cambia nada. */
html[data-live-experience][data-daylight="noche"] #detail-sheet #detail-content > .detail-section {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] #detail-sheet #detail-content > .detail-section :is(li, p) > strong {
  color: var(--live-ink);
}
/* Lista: la dirección iba en una línea con «…» y se perdía la localidad («Calle Esmeralda esquina Tucapel S/N, …»).
 * Ahora hasta dos líneas: cabe entera en la tarjeta de 375 y 320 px sin perder la lista fina. */
html[data-live-experience][data-product-page="map"][data-discovery-view] .product-layout #catalog-results
  > .catalog-card .catalog-card__meta:has(strong) small:first-child {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---------- Mi negocio: horario, reparto y disponibilidad (30/09/2026) ----------
 * Sección nueva (service-details.js): campos en columna, localidades de reparto en dos columnas de casillas y una
 * línea de ayuda fina, con las tintas del resto del panel de día y de noche. */
html[data-live-experience] #business-manager .business-manager__details-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}
html[data-live-experience] #business-manager .business-manager__details-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-live-experience] #business-manager .business-manager__details-form legend {
  margin-bottom: 6px;
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #business-manager .business-manager__zone-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
}
html[data-live-experience] #business-manager .business-manager__hint {
  margin: 0;
  color: var(--cf-soft);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Ficha: bloque «Atención» (disponibilidad con su fecha, horario y reparto) arriba de la ficha del negocio. */
html[data-live-experience] #detail-sheet #detail-content .detail-service__state {
  color: var(--live-ink);
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .detail-service__state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--live-ink-mute);
  vertical-align: 1px;
}
html[data-live-experience] #detail-sheet #detail-content .detail-service__state[data-availability="available"]::before {
  background: var(--mv-accent);
}
html[data-live-experience] #detail-sheet #detail-content .detail-service dd small {
  display: block;
  margin-top: 2px;
  color: var(--live-ink-mute);
  font-size: 0.6875rem;
}

/* ---------- Explorar: cuatro puertas en una fila (01/10/2026) ----------
 * Con comercios y oficios publicados son cuatro pestañas (Servicios, Turismo, Comercios, Oficios) con su número:
 * a 375 px la cuarta quedaba bajo el borde. Letra de 13 px y 14 px entre pestañas; la fila sigue deslizando si
 * algún día no alcanza. */
@media (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes {
    gap: 14px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes button {
    font-size: 13px;
  }
}

/* ---------- Trabajo: ofertas de empleo de los negocios (01/10/2026) ----------
 * Mi negocio: «Ofertas de empleo» con el sueldo en tres columnas. Página Trabajo: «Postula directo» con Llamar,
 * WhatsApp o el enlace del negocio, antes de la preparación con cuenta. */
html[data-live-experience] #business-manager .business-manager__salary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-live-experience] #business-manager .business-manager__salary legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #business-manager [data-jobs-form] h4 {
  margin: 6px 0 0;
  color: var(--live-ink);
  font-size: 0.875rem;
  font-weight: 600;
}
html[data-live-experience] .employment-contact {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
}
html[data-live-experience] .employment-contact h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
html[data-live-experience] .employment-contact p {
  margin: 0;
  font-size: 0.8125rem;
}
html[data-live-experience] .employment-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html[data-live-experience] .employment-contact__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
}
/* Página Trabajo con la letra del estilo C: sin serifa, títulos de 21 y 15 px, texto de 13 px, botones de 40 px. */
html[data-live-experience] #empleo :is(h1, h2, h3, h4) {
  font-family: var(--font-sans);
}
html[data-live-experience] #empleo .space-page-heading h1 {
  font-size: 1.3125rem;
  font-weight: 650;
  line-height: 1.2;
}
html[data-live-experience] #empleo .space-page-heading p:not(.eyebrow) {
  color: var(--cf-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}
html[data-live-experience] #empleo :is(.employment-card, .employment-offer) h2 {
  font-size: 1rem;
  font-weight: 600;
}
html[data-live-experience] #empleo :is(.employment-next h2, .employment-offer h3) {
  font-size: 0.9375rem;
  font-weight: 600;
}
html[data-live-experience] #empleo :is(p, li, dd, dt, label, small) {
  font-size: 0.8125rem;
}
html[data-live-experience] #empleo :is(button, .household-primary) {
  min-height: 40px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---------- Arriendos: foto de la ficha (01/10/2026) ----------
 * La foto del arriendo ocupa el ancho de la ficha en 4:3, con el borde redondeado de las tarjetas. */
html[data-live-experience] #detail-sheet #detail-content .rental-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0 0 14px;
  border-radius: 14px;
  object-fit: cover;
}
html[data-live-experience] #business-manager [data-rentals-photo] {
  max-width: 100%;
  width: 220px;
  border-radius: 10px;
}

/* ---------- Transporte: horarios en la ficha y días en Mi negocio (01/10/2026) ----------
 * Las salidas van como fichas pequeñas en filas que se ajustan; el recorrido es una lista numerada; los días de
 * operación de Mi negocio van en cuatro columnas de casillas. */
html[data-live-experience] #detail-sheet #detail-content .transport-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}
html[data-live-experience] #detail-sheet #detail-content .transport-times span {
  padding: 4px 10px;
  border: 1px solid var(--live-border-soft);
  border-radius: 999px;
  color: var(--live-ink);
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}
html[data-live-experience] #detail-sheet #detail-content .detail-section h4 {
  margin: 12px 0 0;
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .transport-stops {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 0.78125rem;
}
html[data-live-experience] #business-manager .business-manager__days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-live-experience] #business-manager .business-manager__days legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--live-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
/* «Feriados» ocupa su propia fila (no se corta) y la lista vacía de recorridos no deja hueco. */
html[data-live-experience] #business-manager .business-manager__days label:last-of-type { grid-column: 1 / -1; }
html[data-live-experience] #business-manager [data-transport-list]:empty { display: none; }
/* Transporte y Arriendos con su color e ícono propios en el mapa y en la cabecera de la ficha. */
html[data-live-experience] .map-marker--transport .map-marker__pin,
html[data-live-experience] .map-marker--transport .map-marker__cluster {
  background: #63389a;
}
html[data-live-experience] .map-marker--rentals .map-marker__pin,
html[data-live-experience] .map-marker--rentals .map-marker__cluster {
  background: #765338;
}
html[data-live-experience] #detail-sheet[data-family="transport"] { --cf-family: #63389a; --cf-glyph: "\E530"; }
html[data-live-experience] #detail-sheet[data-family="rentals"] { --cf-family: #765338; --cf-glyph: "\E88A"; }

/* ---------- Más filtros en el teléfono (01/10/2026) ----------
 * El panel antiguo se veía cortado: los selectores de aviso compartían fila y truncaban su texto, «Reportes»
 * medía 48 px y se partía en dos líneas, el área de controles (45 % del alto) tapaba el botón de ubicación y la
 * fila de atajos terminaba en seco. Cada selector va en su fila, los botones no parten palabras, el área crece
 * hasta mostrar el panel y la fila de atajos se desvanece en el borde como en el mapa. */
@media (max-width: 67.99rem) {
  html[data-live-experience] #product-extra-filters {
    padding: 10px 12px;
  }
  html[data-live-experience] #product-extra-filters .notice-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-live-experience] #product-extra-filters .browse-filter-row > button {
    white-space: nowrap;
  }
  html[data-live-experience] #product-extra-filters [data-open-report-status] {
    width: auto;
    min-width: 0;
    padding: 0 14px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout .map-workspace:has([data-toggle-filters][aria-expanded="true"]) {
    grid-template-rows: fit-content(72%) minmax(0, 1fr);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls:has([data-toggle-filters][aria-expanded="true"]) {
    max-height: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout .layer-tabs {
    mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
  }
}

/* ---------- Recorrido final del lanzamiento (01/10/2026) ----------
 * Empleo heredaba los colores fijos de «personal-space» (verde oscuro, pensados para fondo claro) y de noche el
 * encabezado y los rótulos de búsqueda no se leían. De noche usan la tinta clara del mapa vivo; las tarjetas siguen
 * claras con su texto oscuro. La fila de temas de la lista (Turismo, rubros) termina desvanecida en el borde, como
 * las filas del mapa, en vez de cortar el último chip en seco. */
html[data-live-experience][data-daylight="noche"] #empleo .space-page-heading :is(h1, h2) {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #empleo .space-page-heading p:not(.eyebrow) {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] #empleo .space-page-heading .eyebrow,
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-search, .employment-tracking) label {
  color: var(--live-ink-soft);
}
@media (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) {
    mask-image: linear-gradient(90deg, black calc(100% - 44px), transparent calc(100% - 12px));
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 44px), transparent calc(100% - 12px));
  }
}

/* ---------- Barra de categorías fina en el mapa del teléfono (01/10/2026) ----------
 * El propietario vio la zona de arriba «súper saturada»: conmutador, capas en dos filas, «Más filtros» y puertas
 * con número, todo en pastillas con borde sobre un degradado oscuro. Queda una sola fila de columnas iguales con
 * ícono de línea y nombre (Ahora · Servicios · Turismo · Comercios · Oficios · Más) sobre la misma franja clara de
 * la cabecera; la seleccionada va en verde con un trazo corto debajo. «Más» despliega debajo las capas (Transporte,
 * Trabajo, Arriendos…) en una grilla y los filtros. Es flex y no grilla porque con Comercios apagado faltan
 * puertas y no deben quedar columnas vacías. Los botones y su comportamiento no cambian. */
@media (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 0;
    max-height: none;
    padding: 0 4px;
    overflow: visible;
    border-bottom: 1px solid var(--mv-line-soft);
    background: var(--mv-glass-deep);
    box-shadow: 0 6px 16px rgb(18 48 42 / 7%);
    mask-image: none;
    -webkit-mask-image: none;
    pointer-events: auto;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is(.live-toolbar, .live-mode-switch, .live-city-modes, .product-filter-bar) {
    display: contents;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is(.live-refresh, [data-live-mode="explore"], [data-view-controls-slot], .layer-count, .layer-picker) {
    display: none;
  }
  /* Aparte: un id dentro de :is() le daba a toda la lista su especificidad y el panel de «Más» no se abría. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    #product-extra-filters {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is([data-live-mode="today"], [data-live-layer], .product-more-filters) {
    position: relative;
    display: grid;
    flex: 1 1 1px;
    justify-items: center;
    align-content: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 4px 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--mv-muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.15;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is([data-live-mode="today"], [data-live-layer], .product-more-filters) .icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    color: inherit;
    stroke-width: 1.5;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is([data-live-mode="today"], [data-live-layer]) span:not(.live-dot, .layer-count) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    [data-live-mode="today"] {
    order: -1;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    [data-live-mode="today"] .live-dot {
    position: absolute;
    top: 9px;
    left: calc(50% + 5px);
    width: 7px;
    height: 7px;
    margin: 0;
    border: 1.5px solid var(--mv-glass-deep);
    box-sizing: content-box;
  }
  /* «Más filtros» conserva su nombre para lectores de pantalla y muestra «Más» en la fila. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .product-more-filters span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .product-more-filters::after {
    content: "Más";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    :is([aria-pressed="true"], [aria-expanded="true"]) {
    background: linear-gradient(var(--mv-accent), var(--mv-accent)) center bottom 3px / 18px 2px no-repeat;
    color: var(--mv-accent);
    font-weight: 600;
  }
  /* «Más» abierto: las capas en una grilla de tres y, debajo, los filtros, a todo el ancho de la franja. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"]:not([data-live-mode="today"])
    .product-layout #browse-controls:has([data-toggle-filters][aria-expanded="true"]) .layer-picker {
    display: block;
    flex: 0 0 100%;
    order: 10;
    padding: 10px 8px 4px;
    border-top: 1px solid var(--mv-line-soft);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"]:not([data-live-mode="today"])
    .product-layout #browse-controls:has([data-toggle-filters][aria-expanded="true"]) #product-extra-filters {
    display: block;
    flex: 0 0 calc(100% - 16px);
    order: 11;
    margin: 6px 8px 10px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .layer-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .layer-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: 64px;
    min-height: 64px;
    padding: 6px 4px;
    border: 1px solid var(--mv-line-soft);
    border-radius: 14px;
    background: transparent;
    color: var(--mv-text);
    font-size: 11px;
    font-weight: 500;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .layer-tabs button .icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    stroke-width: 1.5;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .layer-tabs button[aria-pressed="true"] {
    border-color: var(--mv-accent);
    background: var(--mv-accent);
    color: var(--cv-accent-ink, #ffffff);
  }
  html[data-live-experience][data-daylight="noche"][data-product-page="map"][data-discovery-view="map"] .product-layout
    #browse-controls .layer-tabs button[aria-pressed="true"] {
    background: rgb(25 195 161 / 26%);
    color: #eafffa;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout #browse-controls
    .layer-tabs .layer-separator {
    display: none;
  }
  /* Con «Más» abierto la franja es opaca (el mapa y su zoom se transparentaban detrás de la grilla), no pasa del
   * alto del mapa (se desplaza) y «Ver lista» se oculta: flotaba encima de «Ver comuna» en pantallas bajas. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout
    #browse-controls:has([data-toggle-filters][aria-expanded="true"]) {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--live-surface);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout
    .map-workspace:has([data-toggle-filters][aria-expanded="true"]) :is(.map-results-button, .pharmacy-peek) {
    visibility: hidden;
  }
  /* En «Ahora» no hay capas ni filtros que desplegar (live-map.css oculta su barra): «Más» tampoco se ofrece. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"][data-live-mode="today"]
    .product-layout #browse-controls .product-more-filters {
    display: none;
  }
  /* El zoom quedaba bajo la fila: va a la izquierda, justo debajo de ella (con el id de app.css). */
  html[data-live-experience][data-product-page="map"][data-discovery-view="map"] .product-layout
    #map-panel .leaflet-control-container .leaflet-top.leaflet-left {
    top: 70px;
  }
}

/* ---------- Noche más clara (01/10/2026) ----------
 * El propietario vio la noche «muy oscura»: vidrio casi negro (8 14 19) sobre un mapa también casi negro. La
 * interfaz pasa a un azul pizarra y las superficies suben un escalón; la tinta clara no cambia, así que el
 * contraste del texto sigue sobre 7:1. El fondo del mapa se aclara en map-base-style.js. */
html[data-live-experience][data-daylight="noche"] {
  --mv-glass: rgb(26 36 47 / 72%);
  --mv-glass-soft: rgb(26 36 47 / 60%);
  --mv-glass-deep: rgb(24 33 43 / 95%);
  --live-canvas: #151e28;
  --live-surface: #1c2733;
  --live-inset: #18222d;
  --live-border: #314356;
  --live-border-soft: #26364a;
}

/* ---------- Tarjetas de la lista más limpias (01/10/2026) ----------
 * El propietario vio «descuadraturas» y «elementos mal ubicados»: procedencia y estado iban como pastillas con
 * punto que se apilaban en dos o tres líneas, y todos los íconos en el mismo cuadrado celeste. La procedencia y el
 * estado pasan a una línea de texto fino («Negocio · Vigente»); sólo «Reparte/Atiende a domicilio» sigue como
 * pastilla. El cuadrado del ícono toma el color de su capa (el mismo de los pines), leído del propio ícono. */
@media (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    min-height: 0;
    margin: 0 0 1px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > span {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--mv-muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > span::before {
    content: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges
    > span:not(:first-child, .state-badge--delivery)::before {
    content: "·";
    display: inline;
    width: auto;
    height: auto;
    margin: 0 5px;
    border: 0;
    background: none;
    color: var(--mv-muted);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > .state-badge--delivery {
    order: 2;
    margin: 2px 0 1px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mv-accent) 11%, transparent);
    color: var(--mv-accent);
    font-weight: 600;
  }
  /* «Reparte a domicilio» va siempre en su propia línea, alineada: si caía sola por falta de ancho, quedaba con
   * sangría. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges:has(> .state-badge--delivery)::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }
  /* Color del ícono por capa, el mismo de los pines del mapa. */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon {
    border: 0;
    background: color-mix(in srgb, var(--c) 12%, var(--live-surface));
    color: var(--c);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon .icon {
    color: var(--c);
    stroke-width: 1.6;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon {
    --c: var(--mv-accent);
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#police"],
    use[href$="#shield"])) {
    --c: #2f7df6;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#fire"],
    use[href$="#ambulance"])) {
    --c: #e8590c;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#hospital"], use[href$="#clinic"],
    use[href$="#first-aid"], use[href$="#heart-pulse"], use[href$="#mental-health"], use[href$="#pill"])) {
    --c: #e5484d;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#landmark"],
    use[href$="#citizen-service"], use[href$="#building"], use[href$="#graduation-cap"], use[href$="#bell"],
    use[href$="#info"])) {
    --c: #0d9488;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#place"], use[href$="#waves"],
    use[href$="#tree"], use[href$="#compass"], use[href$="#map-pin"])) {
    --c: #7c5cd6;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#store"],
    use[href$="#shopping-bag"], use[href$="#utensils"], use[href$="#pet"])) {
    --c: #d9730d;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(:is(use[href$="#tools"], use[href$="#wrench"],
    use[href$="#hammer"], use[href$="#bolt"], use[href$="#truck"], use[href$="#laptop"],
    use[href$="#droplet"])) {
    --c: #0369a1;
  }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(use[href$="#bus"]) { --c: #63389a; }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(use[href$="#home"]) { --c: #765338; }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(use[href$="#briefcase"]) { --c: #315988; }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(use[href$="#calendar"]) { --c: #16a34a; }
  html[data-live-experience] #catalog-results .catalog-card__icon:has(use[href$="#users"]) { --c: #db2777; }
  /* De noche los tonos más oscuros (transporte, arriendos, empleo) suben para leerse sobre la pizarra. */
  html[data-live-experience][data-daylight="noche"] #catalog-results .catalog-card__icon {
    color: color-mix(in srgb, var(--c) 70%, #ffffff);
  }
  html[data-live-experience][data-daylight="noche"][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon .icon {
    color: color-mix(in srgb, var(--c) 70%, #ffffff);
  }
}

/* ---------- Mi negocio: título del catálogo en su línea (01/10/2026) ----------
 * Con «Mis servicios» y «Nuevo servicio», «Actualizar» quedaba sola en una segunda fila. El título va en su propia
 * línea y los dos botones juntos debajo, alineados a la izquierda, para cualquier tipo de negocio. */
html[data-live-experience] #business-manager .business-manager__list-title {
  flex-wrap: wrap;
  row-gap: 8px;
}
html[data-live-experience] #business-manager .business-manager__list-title h3 {
  flex: 1 0 100%;
}

/* ---------- Empleo de noche: tarjetas en la superficie nocturna (01/10/2026) ----------
 * De noche las tarjetas y campos de Empleo seguían blancos (colores fijos de app.css) y encandilaban sobre la
 * pizarra. Toman la superficie nocturna con tinta clara; de día no cambian. */
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-card, .employment-offer, .employment-next) {
  border-color: var(--live-border-soft);
  background: var(--live-surface);
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-card, .employment-offer, .employment-next)
  :is(h2, h3, h4, p, li, dt, dd, strong, span, label) {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-card small, .employment-company,
  .employment-card .eyebrow, .employment-offer .eyebrow, .employment-offer dt) {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-tags span, .employment-offer dl,
  .employment-contact, .household-note) {
  border-color: var(--live-border-soft);
  background: rgb(255 255 255 / 6%);
}
html[data-live-experience][data-daylight="noche"] #empleo :is(input, select, textarea) {
  border-color: var(--live-border);
  background: var(--live-inset);
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #empleo :is(.employment-offer a, .employment-card a) {
  color: var(--mv-accent);
}

/* Guardados: el tipo de cada ficha en una línea fina bajo su título (01/10/2026). */
html[data-live-experience] #saved-list .saved-kind {
  display: block;
  margin-top: 2px;
  color: var(--mv-muted);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .01em;
}

/* «Informar un dato incorrecto» (#report-dialog) con la letra fina y la superficie de las demás hojas: de noche
 * quedaba blanco, con títulos de 800 y un cierre «×» cuadrado (01/10/2026). Si la API dice que la recepción
 * está apagada (data-reports en reports.js) se ocultan el botón de la ficha y «Reportes» de «Más filtros». */
html[data-reports="off"] #detail-sheet .detail-report,
html[data-reports="off"] [data-open-report-status] {
  display: none;
}
html[data-live-experience] #report-dialog {
  --cf-link: var(--mv-accent-deep);
  --cf-accent: var(--mv-accent-deep);
  --cf-accent-ink: #ffffff;
  --cf-field: #7f8f89;
  --cf-ring: rgb(11 110 86 / 30%);
  border: 1px solid var(--live-border-soft);
  border-radius: 20px;
  background: var(--live-canvas);
  color: var(--mv-text);
  font-size: 0.8125rem;
  line-height: 1.5;
  box-shadow: var(--live-shadow-lg);
}
html[data-live-experience][data-daylight="noche"] #report-dialog {
  --cf-link: var(--mv-accent);
  --cf-accent: var(--mv-accent);
  --cf-accent-ink: #04211b;
  --cf-field: rgb(255 255 255 / 36%);
  --cf-ring: rgb(25 195 161 / 36%);
}
html[data-live-experience] #report-dialog::backdrop {
  background: rgb(8 20 18 / 42%);
}
html[data-live-experience] #report-dialog .sheet-header {
  align-items: center;
  gap: 12px;
  padding: 14px 1rem 12px;
  border-block-end: 1px solid var(--live-border-soft);
  background: var(--live-canvas);
}
html[data-live-experience] #report-dialog .eyebrow {
  margin: 0 0 4px;
  color: var(--cf-link);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
html[data-live-experience] #report-title {
  margin: 0;
  color: var(--mv-text);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}
html[data-live-experience] #report-dialog .sheet-header .icon-button {
  flex: none;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1px solid var(--live-border-soft);
  border-radius: 50%;
  background: var(--live-surface);
  color: var(--mv-text);
}
html[data-live-experience] #report-dialog .sheet-header .icon-button .icon {
  width: 1.25rem;
  height: 1.25rem;
}
html[data-live-experience] #report-dialog .report-body {
  gap: 14px;
  padding: 14px 1rem 18px;
}
html[data-live-experience] #report-dialog :is(#report-place-title, #report-receipt-status) {
  color: var(--mv-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #report-dialog #report-feedback {
  color: var(--mv-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
html[data-live-experience] #report-dialog #report-feedback:empty {
  display: none;
}
html[data-live-experience] #report-dialog form > p,
html[data-live-experience] #report-dialog #report-receipt > p {
  color: var(--mv-muted);
}
html[data-live-experience] #report-dialog label {
  gap: 6px;
  color: var(--mv-text);
  font-weight: 500;
}
html[data-live-experience] #report-dialog h3 {
  color: var(--mv-text);
  font-size: 0.9375rem;
  font-weight: 600;
}
html[data-live-experience] #report-dialog :is(input, select, textarea) {
  min-height: calc(var(--target) - 0.25rem);
  padding: 8px 12px;
  border: 1px solid var(--cf-field);
  border-radius: 12px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-size: max(16px, 1rem);
  font-weight: 400;
  line-height: 1.35;
  box-shadow: none;
}
html[data-live-experience] #report-dialog textarea {
  min-height: 6.5rem;
}
html[data-live-experience] #report-dialog :is(input, select, textarea):focus {
  border-color: var(--cf-link);
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--cf-ring);
}
html[data-live-experience] #report-dialog :is(.primary-button, .secondary-button) {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--live-border);
  border-radius: 999px;
  background: transparent;
  color: var(--cf-link);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}
html[data-live-experience] #report-dialog .primary-button {
  border-color: transparent;
  background: var(--cf-accent);
  color: var(--cf-accent-ink);
  font-weight: 600;
}
html[data-live-experience] #report-dialog :is(.primary-button, .secondary-button):disabled {
  border: 1px dashed var(--live-border-strong);
  background: transparent;
  color: var(--mv-muted);
  opacity: 1;
}
html[data-live-experience] #report-dialog #report-lookup {
  border-top-color: var(--live-border-soft);
}
html[data-live-experience] #report-dialog #report-receipt {
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
  background: var(--live-inset);
}
html[data-live-experience] #report-dialog :focus-visible {
  outline: 2px solid var(--cf-link);
  outline-offset: 2px;
}

/* Noche: Guardados, Compartir y el menú en la misma pizarra que las fichas y diálogos (#151e28); seguían casi
 * negros (#0e171c y #0d1a27) después de aclarar la noche (01/10/2026). */
html[data-live-experience][data-daylight="noche"] .saved-sheet {
  border-color: var(--live-border-soft);
  background: var(--live-canvas);
}
html[data-live-experience][data-daylight="noche"] .product-nav {
  background: var(--live-canvas);
}

/* Turismo en la lista del teléfono: el ícono de cada tema (ancla, playa, libro…) conserva el morado de la capa,
 * también cuando comparte silueta con otra (patrimonio usa la de servicios y gastronomía la de comercios). */
@media (max-width: 67.99rem) {
  html[data-live-experience] #catalog-results .catalog-card__icon.catalog-card__icon--tourism:has(svg use) {
    --c: #7c5cd6;
  }
}

/* Procedencia y estado de la tarjeta como una sola línea de texto: con flex, si «Disponible desde el…» no cabía
 * bajaba entero y el «·» quedaba solo al comienzo de la segunda línea (01/10/2026). En línea el punto viaja pegado
 * a la palabra siguiente; «Reparte/Atiende a domicilio» sigue como pastilla en su propia línea. */
@media (max-width: 67.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges {
    display: block;
    font-size: 10.5px;
    line-height: 1.5;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > span {
    display: inline;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > .state-badge--delivery {
    display: flex;
    width: fit-content;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges:has(> .state-badge--delivery)::after {
    content: none;
  }
}

/* «Más» en el teléfono: categoría, Guardados y «Ver comuna» en una sola fila de botones finos. «Todas las
 * categorías» venía con letra de 850 y fondo blanco también de noche, y «Ver comuna» caía solo a otra línea
 * (01/10/2026). Se mantienen 44 px de alto para el dedo. */
@media (max-width: 67.99rem) {
  html[data-live-experience] #product-extra-filters .browse-filter-row {
    align-items: center;
    gap: 6px;
  }
  html[data-live-experience] #product-extra-filters .category-menu > summary,
  html[data-live-experience] #product-extra-filters .browse-filter-row > .saved-trigger,
  html[data-live-experience] #product-extra-filters .browse-filter-row > #fit-arauco {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--mv-line);
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--mv-text);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
  }
  html[data-live-experience] #product-extra-filters .category-menu > summary {
    min-width: 0;
    gap: 6px;
  }
  html[data-live-experience] #product-extra-filters .category-menu > summary .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--mv-accent);
  }
  html[data-live-experience] #product-extra-filters .browse-filter-row > #fit-arauco {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }
}

/* ---------- Empleo: personas que buscan trabajo (COM-59/60/61, 01/10/2026) ----------
 * Tarjeta con quién y desde dónde, experiencia, habilidades en etiquetas, cuándo puede trabajar y los botones de
 * contacto que la persona autorizó. El llamado a publicar va en una franja suave sobre la lista. */
html[data-live-experience] #empleo .job-seeker-cta {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 14px;
}
html[data-live-experience] #empleo .job-seeker-cta p {
  margin: 0;
}
html[data-live-experience] #empleo .job-seeker-cta button {
  justify-self: start;
}
html[data-live-experience] #empleo p.job-seeker-card__who {
  margin: 0 0 8px;
  color: var(--cf-soft);
}
html[data-live-experience] #empleo .job-seeker-card .employment-tags {
  margin: 10px 0;
}
html[data-live-experience] #empleo .job-seeker-card__when {
  margin: 0 0 12px;
}
html[data-live-experience] #empleo .job-seeker-card .employment-contact__actions:empty {
  display: none;
}
@media (min-width: 40rem) {
  html[data-live-experience] #empleo .job-seeker-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
html[data-live-experience][data-daylight="noche"] #empleo p.job-seeker-card__who {
  color: var(--live-ink-soft);
}
/* De noche los enlaces de las tarjetas toman el acento; los botones de contacto conservan su texto blanco. */
html[data-live-experience][data-daylight="noche"] #empleo .job-seeker-card .employment-contact__actions a {
  color: #fff;
}
html[data-live-experience][data-daylight="noche"] #empleo .job-seeker-cta {
  border-color: var(--live-border-soft);
  background: var(--live-surface);
}
/* Alta de la persona que busca trabajo: disponibilidad en dos columnas de casillas. */
html[data-live-experience] #submission-dialog .job-seeker-availability {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
/* La pregunta lleva la letra de las etiquetas de los campos (12 px, 600), no la del título del paso. */
html[data-live-experience] #submission-dialog .job-seeker-availability > legend {
  margin: 0;
  padding: 0;
  color: var(--mv-text);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #submission-dialog .job-seeker-availability .check-field {
  min-height: 0;
  margin-block-start: 8px;
}
/* Alta del particular que arrienda (COM-62…67): precio y periodo en una fila, características en tres columnas y
 * la vista previa de la foto con el borde de las tarjetas. */
html[data-live-experience] #submission-dialog :is(.rental-offer-pair, .rental-offer-trio) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
html[data-live-experience] #submission-dialog .rental-offer-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-live-experience] #submission-dialog .rental-offer-preview {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 10px 0 0;
  border-radius: 14px;
}
html[data-live-experience] #submission-dialog .rental-offer-preview[hidden] {
  display: none;
}

/* ---------- Publicaciones de vecinos: muro y «Publicar» (02/10/2026) ----------
 * Tarjetas blancas con quién, dónde y hace cuánto; etiqueta de tipo en color suave; contacto y reacciones como
 * pastillas finas; botón flotante «Publicar» sobre la barra inferior. La barra pasa a cuatro botones. */
html[data-live-experience] .product-layout .mobile-dock:has([data-dock-posts]:not([hidden])) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-live-experience] .product-layout .mobile-dock [data-dock-posts][hidden] {
  display: none;
}
html[data-live-experience] #publicaciones {
  padding-bottom: 96px;
}
html[data-live-experience] #publicaciones :is(h1, h2, h3) {
  font-family: var(--font-sans);
}
html[data-live-experience] #publicaciones .space-page-heading h1 {
  font-size: 1.3125rem;
  font-weight: 650;
}
html[data-live-experience] #publicaciones .space-page-heading p:not(.eyebrow) {
  color: var(--cf-soft);
  font-size: 0.8125rem;
}
html[data-live-experience] #publicaciones .wall-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
html[data-live-experience] #publicaciones .wall-filters button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--live-border-soft);
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--cf-soft);
  font-size: 0.78125rem;
  font-weight: 500;
}
html[data-live-experience] #publicaciones .wall-filters [aria-pressed="true"] {
  border-color: var(--mv-text);
  background: var(--mv-text);
  color: var(--live-surface);
}
html[data-live-experience] #publicaciones .wall-status:empty {
  display: none;
}
html[data-live-experience] #publicaciones .wall-status {
  margin: 6px 0;
  color: var(--cf-soft);
  font-size: 0.78125rem;
}
html[data-live-experience] #publicaciones .wall-list {
  display: grid;
  gap: 10px;
}
html[data-live-experience] #publicaciones .wall-post {
  padding: 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
}
html[data-live-experience] #publicaciones .wall-post--resolved {
  opacity: 0.78;
}
html[data-live-experience] #publicaciones .wall-post__who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
html[data-live-experience] #publicaciones .wall-avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 650;
}
html[data-live-experience] #publicaciones .wall-post__who b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-post__who small {
  color: var(--cf-soft);
  font-size: 0.6875rem;
}
html[data-live-experience] #publicaciones .wall-tag {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.65625rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-live-experience] #publicaciones .wall-tag--need {
  background: #fde8ec;
  color: #a3284a;
}
html[data-live-experience] #publicaciones .wall-tag--offer {
  background: #e5f4ee;
  color: #0e7f64;
}
html[data-live-experience] #publicaciones .wall-tag--news {
  background: #e8eefb;
  color: #2f56a8;
}
html[data-live-experience] #publicaciones .wall-tag--event {
  background: #fdf1df;
  color: #9a5a10;
}
html[data-live-experience] #publicaciones .wall-post h3 {
  margin: 0 0 4px;
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.35;
}
html[data-live-experience] #publicaciones .wall-post__title {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
html[data-live-experience] #publicaciones .wall-post p {
  margin: 0;
  color: var(--cf-soft);
  font-size: 0.78125rem;
  line-height: 1.5;
}
html[data-live-experience] #publicaciones .wall-post__meta {
  display: block;
  margin-top: 6px;
  color: var(--cf-soft);
  font-size: 0.71875rem;
}
html[data-live-experience] #publicaciones .wall-post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
html[data-live-experience] #publicaciones .wall-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--live-border-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--mv-text);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
html[data-live-experience] #publicaciones .wall-chip[aria-pressed="true"] {
  border-color: var(--mv-accent);
  background: rgb(14 127 100 / 10%);
  color: var(--mv-accent);
}
html[data-live-experience] #publicaciones .wall-chip--contact {
  border-color: #bfe3d5;
  color: var(--mv-accent);
}
html[data-live-experience] #publicaciones .wall-resolved {
  margin-left: auto;
  color: var(--mv-accent);
  font-size: 0.71875rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-more {
  display: block;
  margin: 14px auto 0;
}
html[data-live-experience] #publicaciones .wall-fab {
  position: fixed;
  z-index: 30;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--mv-accent);
  box-shadow: 0 8px 20px rgb(14 127 100 / 32%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 650;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post p,
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post__meta,
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post__who small {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post {
  color: var(--live-ink);
}
/* De noche el titular, los filtros y el título de cada publicación tomaban la tinta oscura de la base. */
html[data-live-experience][data-daylight="noche"] #publicaciones :is(.space-page-heading h1, .wall-post h3,
  .household-empty h2) {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #publicaciones :is(.space-page-heading p:not(.eyebrow),
  .wall-filters button:not([aria-pressed="true"]), .wall-status, .household-empty p) {
  color: var(--live-ink-soft);
}
/* El titular recibe el foco al abrir el muro para los lectores de pantalla; no es un control: sin recuadro. */
html[data-live-experience] #wall-title:focus {
  outline: none;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-fab {
  color: #08261f;
}
/* Formulario «Nueva publicación»: una hoja con los tipos como tarjetas y campos de letra fina. */
html[data-live-experience] .wall-composer {
  width: min(520px, calc(100vw - 16px));
  max-height: calc(100dvh - 24px);
  padding: 18px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-family: var(--font-sans);
}
html[data-live-experience] .wall-composer header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html[data-live-experience] .wall-composer h2 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 650;
}
html[data-live-experience] .wall-composer__lead,
html[data-live-experience] .wall-composer__hint {
  margin: 4px 0 12px;
  color: var(--cf-soft);
  font-size: 0.78125rem;
}
html[data-live-experience] .wall-composer__types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
html[data-live-experience] .wall-composer__types button {
  padding: 10px;
  border: 1px solid var(--live-border-soft);
  border-radius: 12px;
  background: transparent;
  color: var(--cf-soft);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}
html[data-live-experience] .wall-composer__types button b {
  display: block;
  margin-bottom: 2px;
  color: var(--mv-text);
  font-size: 0.84375rem;
  font-weight: 600;
}
html[data-live-experience] .wall-composer__types [aria-checked="true"] {
  border: 1.5px solid var(--mv-accent);
  background: rgb(14 127 100 / 7%);
}
html[data-live-experience] .wall-composer .form-field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
html[data-live-experience] .wall-composer :is(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--live-border);
  border-radius: 11px;
  background: var(--live-surface);
  color: var(--mv-text);
  font: 400 0.84375rem/1.4 var(--font-sans);
}
html[data-live-experience] .wall-composer .check-field {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  color: var(--cf-soft);
  font-size: 0.75rem;
}
html[data-live-experience] .wall-composer .check-field input {
  width: 18px;
  min-height: 18px;
}
html[data-live-experience] .wall-composer__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html[data-live-experience] .wall-composer__note:empty {
  display: none;
}
html[data-live-experience] .wall-composer__note {
  margin: 10px 0 0;
  color: #a3284a;
  font-size: 0.78125rem;
}
html[data-live-experience] .wall-composer .primary-button {
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border-radius: 999px;
}
html[data-live-experience] .wall-composer .check-field span {
  font-weight: 400;
  line-height: 1.45;
}
/* ---------- «Hoy en …» al inicio de Explorar (02/10/2026, opción B del propietario) ----------
 * La cinta de hoy está oculta en la página del mapa en todos los anchos; la tarjeta lleva sus datos al panel.
 * Tarjeta fina: título y hora en una línea, y una fila por dato (clima, farmacia de turno, novedades). */
html[data-live-experience] .today-card {
  margin: 2px 0 14px;
  padding: 10px 14px 6px;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-family: var(--font-sans);
}
html[data-live-experience] .today-card[hidden],
html[data-live-experience] .today-card__rows li[hidden],
html[data-live-experience] .today-card__src[hidden] {
  display: none;
}
html[data-live-experience] .today-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
html[data-live-experience] .today-card h3 {
  margin: 0;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
}
html[data-live-experience] .today-card__head p {
  margin: 0;
  color: var(--mv-muted);
  font-size: 0.71875rem;
  font-variant-numeric: tabular-nums;
}
html[data-live-experience] .today-card__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-live-experience] .today-card__rows li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 0;
}
html[data-live-experience] .today-card__rows li:not([hidden]) ~ li:not([hidden]) {
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] .today-card__rows .icon {
  width: 16px;
  height: 16px;
  color: var(--mv-accent);
}
html[data-live-experience] .today-card__rows .live-dot {
  justify-self: center;
}
html[data-live-experience] .today-card__rows p {
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
}
html[data-live-experience] .today-card__rows strong {
  font-weight: 600;
}
html[data-live-experience] .today-card__rows p a {
  color: var(--mv-accent-deep);
  font-weight: 600;
  text-decoration: none;
}
html[data-live-experience] .today-card__rows small {
  color: var(--mv-muted);
  font-size: 0.71875rem;
  text-align: right;
}
html[data-live-experience] .today-card__src a {
  color: inherit;
}
html[data-live-experience][data-daylight="noche"] .today-card {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] :is(.today-card__head p, .today-card__rows small) {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] .today-card__rows p a {
  color: var(--mv-accent);
}
/* ---------- Turismo: carrusel de fotos, «Qué ofrece» y «Antes de ir» (02/10/2026, maqueta aprobada) ----------
 * La cabecera de la ficha turística es un carrusel deslizable (una foto por pantalla, con su crédito arriba y un
 * contador abajo). Lo que el lugar ofrece va primero; lo pendiente y la procedencia, al final y en letra fina. */
html[data-live-experience] #detail-sheet #detail-content > .place-carousel .place-carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html[data-live-experience] #detail-sheet #detail-content > .place-carousel .place-carousel__track::-webkit-scrollbar {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content > .place-carousel .place-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
}
html[data-live-experience] #detail-sheet #detail-content > .place-carousel .place-carousel__count {
  position: absolute;
  right: 14px;
  bottom: 42px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(6 12 14 / 55%);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-offer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-offer li {
  color: var(--live-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-offer li small {
  display: block;
  margin-bottom: 1px;
  color: var(--cf-link, var(--mv-accent-deep));
  font-size: 0.6875rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-before .detail-status-row {
  margin: 0 0 6px;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-before h4 {
  margin: 10px 0 4px;
  color: var(--live-ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-before ul:not(.fact-list) {
  margin: 0;
  padding-left: 16px;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-before :is(p, li, dt, dd, .fact-list li > *),
html[data-live-experience] #detail-sheet #detail-content:has(.tourist-before)
  :is(.detail-provenance, .public-place-sources) :is(p, li, dt, dd, small, strong) {
  font-size: 0.71875rem;
  font-weight: 400;
  line-height: 1.45;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-before .detail-visit-pending {
  margin: 6px 0 0;
  color: var(--live-ink-soft);
}
/* Portada de Turismo: fila deslizable de lugares con foto sobre la lista (tarjeta al 78 % para que asome la
 * siguiente). Texto fino; el crédito de cada foto va en la tarjeta. */
html[data-live-experience] .tourism-carousel {
  margin: 0 0 14px;
}
html[data-live-experience] .tourism-carousel[hidden] {
  display: none;
}
html[data-live-experience] .tourism-carousel__title {
  margin: 0 0 8px;
  color: var(--mv-muted);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-live-experience] .tourism-carousel__track {
  display: flex;
  gap: 10px;
  margin-inline: -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-padding-inline: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
html[data-live-experience] .tourism-carousel__track::-webkit-scrollbar {
  display: none;
}
html[data-live-experience] .tourism-carousel__card {
  display: grid;
  flex: 0 0 78%;
  grid-template-rows: 150px auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--live-border-soft);
  border-radius: 16px;
  background: var(--live-surface);
  color: var(--mv-text);
  font-family: var(--font-sans);
  text-align: left;
  scroll-snap-align: start;
}
html[data-live-experience] .tourism-carousel__card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
html[data-live-experience] .tourism-carousel__text {
  display: grid;
  gap: 2px;
  padding: 9px 12px 10px;
}
html[data-live-experience] .tourism-carousel__text small {
  color: var(--mv-accent-deep);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-live-experience] .tourism-carousel__text strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] .tourism-carousel__credit {
  color: var(--mv-muted);
  font-size: 0.625rem;
}
html[data-live-experience][data-daylight="noche"] .tourism-carousel__card {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] .tourism-carousel__text small {
  color: var(--mv-accent);
}
html[data-live-experience][data-daylight="noche"] .tourism-carousel__credit {
  color: var(--live-ink-soft);
}
/* Con una categoría abierta (Turismo, Comercios, Oficios) la tarjeta «Hoy» cede el sitio a sus temas y fotos. */
html[data-live-experience] .discovery-panel:has(#tourism-themes:not([hidden])) .today-card {
  display: none;
}
/* Con cuentas encendidas, «Guardar en cuenta» entraba a la barra de la ficha con el mismo marcador que «Guardar»
 * y su aviso empujaba y aplastaba «Llamar». Ahora es un ícono propio (nube) y el aviso queda para lectores de
 * pantalla, sin tapar los botones. */
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal
  [data-account-bookmark]::before {
  content: "\E2BD";
  content: "\E2BD" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal
  [data-account-bookmark][aria-pressed="true"]::before {
  content: "\E5CA";
  content: "\E5CA" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-account-bookmark-note] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-actions--primary .detail-action {
  min-width: 96px;
}
/* «Seguir este negocio» (con cuenta): una pastilla fina con campana, no el botón gris del navegador. */
html[data-live-experience] #detail-sheet #detail-content .detail-follow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--live-border-soft);
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--cf-link, var(--mv-accent-deep));
  font: 600 0.78125rem/1 var(--font-sans);
}
html[data-live-experience] #detail-sheet #detail-content .detail-follow::before {
  font: 400 18px/1 "Material Symbols Rounded";
  content: "\E7F4";
  content: "\E7F4" / "";
}
/* ---------- Muro ordenado (02/10/2026, «se ve sobresaturado») ----------
 * Patrón de muro vecinal y de tarjetas de Material: una sobrelínea con tipo y rubro en el color del tipo (sin
 * pastilla), el título como lo más visible, el texto en dos líneas, quién y cuándo en letra chica, y un único
 * botón destacado (el contacto). Reacciones como texto; la entrada «Publicar» va arriba, sin botón flotante. */
html[data-live-experience] #publicaciones .space-page-heading h1 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--live-border-soft);
  border-radius: 999px;
  background: var(--live-surface);
  color: var(--mv-muted);
  font: 400 0.8125rem/1.3 var(--font-sans);
  text-align: left;
}
html[data-live-experience] #publicaciones .wall-entry b {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mv-accent);
  color: #ffffff;
  font-size: 0.78125rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-filters {
  gap: 6px;
}
html[data-live-experience] #publicaciones .wall-filters button {
  min-height: 32px;
  padding: 0 12px;
}
html[data-live-experience] #publicaciones .wall-filters [aria-pressed="true"] {
  border-color: var(--mv-accent);
  background: rgb(14 127 100 / 10%);
  color: var(--mv-accent-deep);
}
html[data-live-experience] #publicaciones .wall-post {
  display: grid;
  gap: 4px;
  padding: 14px 14px 10px;
}
html[data-live-experience] #publicaciones .wall-post__kicker {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__kicker.wall-kicker--need {
  color: #a3284a;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__kicker.wall-kicker--offer {
  color: #0e7f64;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__kicker.wall-kicker--news {
  color: #2f56a8;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__kicker.wall-kicker--event {
  color: #9a5a10;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__kicker.wall-kicker--resolved {
  color: var(--mv-muted);
}
html[data-live-experience] #publicaciones .wall-post__when {
  margin: 0;
  color: var(--mv-text);
  font-size: 0.78125rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-post h3 {
  margin: 0;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__body {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
html[data-live-experience] #publicaciones .wall-post .wall-post__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
html[data-live-experience] #publicaciones .wall-post__who > span:not(.wall-avatar) {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}
html[data-live-experience] #publicaciones .wall-post__who b {
  display: inline;
  font-size: 0.75rem;
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-post__who small {
  color: var(--mv-muted);
  font-size: 0.6875rem;
}
html[data-live-experience] #publicaciones .wall-avatar {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: var(--live-border-soft);
  color: var(--mv-text);
  font-size: 0.6875rem;
}
html[data-live-experience] #publicaciones :is(.wall-resolve, .wall-react) {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mv-muted);
  font: 500 0.75rem/1 var(--font-sans);
}
html[data-live-experience] #publicaciones .wall-resolve {
  flex: 0 0 auto;
  color: var(--mv-accent-deep);
}
html[data-live-experience] #publicaciones .wall-react[aria-pressed="true"] {
  color: var(--mv-accent-deep);
  font-weight: 600;
}
html[data-live-experience] #publicaciones .wall-post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
html[data-live-experience] #publicaciones .wall-post__actions .wall-chip--contact {
  margin-right: auto;
  border-color: transparent;
  background: rgb(14 127 100 / 10%);
  color: var(--mv-accent-deep);
  font-weight: 600;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post .wall-post__kicker.wall-kicker--need {
  color: #f08aa3;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post .wall-post__kicker.wall-kicker--offer {
  color: #5fd0b0;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post .wall-post__kicker.wall-kicker--news {
  color: #8fb0f0;
}
html[data-live-experience][data-daylight="noche"] #publicaciones .wall-post .wall-post__kicker.wall-kicker--event {
  color: #f0b766;
}
html[data-live-experience][data-daylight="noche"] #publicaciones :is(.wall-post__when, .wall-avatar) {
  color: var(--live-ink);
}
html[data-live-experience][data-daylight="noche"] #publicaciones :is(.wall-react, .wall-post__who small,
  .wall-entry) {
  color: var(--live-ink-soft);
}
html[data-live-experience][data-daylight="noche"] #publicaciones :is(.wall-resolve, .wall-react[aria-pressed="true"],
  .wall-post__actions .wall-chip--contact, .wall-filters [aria-pressed="true"]) {
  color: var(--mv-accent);
}
/* En el muro no hay nada que buscar en el mapa: la barra superior deja sólo la localidad. */
html[data-live-experience][data-product-page="posts"] .product-layout :is(.product-search, .map-search) {
  display: none;
}
/* ---------- Fichas ordenadas (02/10/2026, «se ve sobresaturado») ----------
 * Revisión de capturas + patrones (NN/g, Material 3, Google Maps): secciones con un rótulo corto en minúscula y
 * sin punto de color, estado como texto fino (no pastillas), requisitos como enlace fino, precios como lista,
 * «Cerca de aquí» en fila deslizable y «Antes de ir» como lista de comprobación con íconos. */
html[data-live-experience] #detail-sheet #detail-content .detail-section {
  padding-top: 14px;
}
html[data-live-experience] #detail-sheet #detail-content .detail-section h3 {
  margin: 0 0 8px;
  color: var(--live-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-section:not(.detail-location, .detail-provenance)
  h3::before {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > * {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > * + *::before {
  margin: 0 6px;
  color: var(--live-ink-mute, var(--mv-muted));
  content: "·";
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > *::after {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements summary {
  display: inline-flex;
  color: var(--cf-link);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #detail-sheet #detail-content > .business-verification-requirements summary::after {
  font-size: 16px;
}
/* Precios: una fila por trabajo o producto, título a la izquierda y precio a la derecha. */
html[data-live-experience] #detail-sheet #detail-content .business-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
html[data-live-experience] #detail-sheet #detail-content .business-product {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html[data-live-experience] #detail-sheet #detail-content .business-product + .business-product {
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #detail-sheet #detail-content .business-product img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}
html[data-live-experience] #detail-sheet #detail-content .business-product > div {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 0;
}
html[data-live-experience] #detail-sheet #detail-content .business-product > div > * {
  grid-column: 1 / -1;
}
html[data-live-experience] #detail-sheet #detail-content .business-product > div > h4 {
  grid-column: 1;
  font-size: 0.8125rem;
}
html[data-live-experience] #detail-sheet #detail-content .business-product > div > strong {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
}
html[data-live-experience] #detail-sheet #detail-content .business-product p {
  margin: 0;
  font-size: 0.75rem;
}
html[data-live-experience] #detail-sheet #detail-content .business-product small {
  color: var(--live-ink-mute, var(--mv-muted));
  font-size: 0.6875rem;
}
html[data-live-experience] #detail-sheet #detail-content .business-product__availability {
  color: #b86a00;
}
/* «Cerca de aquí»: fila deslizable de tarjetas compactas, como la portada de Turismo. */
html[data-live-experience] #detail-sheet #detail-content .detail-related ul {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related li {
  display: grid;
  flex: 0 0 62%;
  gap: 4px;
  align-content: start;
  scroll-snap-align: start;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place {
  display: grid;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-color: var(--live-border-soft);
  border-radius: 14px;
  align-content: start;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place > img {
  width: 100%;
  height: 92px;
  border-radius: 0;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place > span {
  gap: 2px;
  padding: 8px 10px 10px;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place small {
  color: var(--cf-link);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place strong {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place > span > span {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-credit {
  font-size: 0.625rem;
}
/* «Antes de ir»: lista de comprobación; lo que falta dice «Por confirmar» en gris. */
html[data-live-experience] #detail-sheet #detail-content .tourist-check {
  display: grid;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-check li {
  display: grid;
  grid-template-columns: 16px 88px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  color: var(--live-ink);
  font-size: 0.75rem;
  line-height: 1.45;
}
html[data-live-experience] #detail-sheet #detail-content .tourist-check li + li {
  border-top: 1px solid var(--live-border-soft);
}
html[data-live-experience] #detail-sheet #detail-content .tourist-check .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--cf-link);
}
html[data-live-experience] #detail-sheet #detail-content .tourist-check li > span {
  color: var(--live-ink-soft);
}
html[data-live-experience] #detail-sheet #detail-content .tourist-check em {
  color: var(--live-ink-mute, var(--mv-muted));
  font-style: normal;
}
html[data-live-experience] #detail-sheet #detail-content :is(.tourist-record, .public-place-sources details) summary {
  margin-top: 8px;
  color: var(--cf-link);
  font-size: 0.71875rem;
  font-weight: 500;
  cursor: pointer;
}
/* ---------- Explorar ordenado (02/10/2026, «se ve sobresaturado») ----------
 * Filas de Material 3 / Google Maps: el título primero y una sola línea gris con el tipo y la dirección; el
 * estado sólo si es excepcional. Íconos y fotos más chicos, «Ver en el mapa» sin círculo. */
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0;
    align-items: baseline;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > * {
    grid-column: 1 / -1;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__title {
    grid-row: 1;
    font-size: 14px;
    font-weight: 600;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > .catalog-card__meta:not(:has(strong)) {
    grid-row: 2;
    grid-column: 1;
    color: var(--mv-muted);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > .catalog-card__meta:has(strong) {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > .catalog-card__meta:has(strong)
    small:first-child::before {
    margin: 0 5px;
    content: "·";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > .catalog-card__badges {
    grid-row: 3;
    margin-top: 2px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges :is(.source-badge, .state-badge) {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #b86a00;
    font-size: 11px;
    font-weight: 500;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges .state-badge--delivery {
    color: var(--mv-accent-deep);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > * + *::before {
    margin: 0 5px;
    color: var(--mv-muted);
    content: "·";
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__button {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 52px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 12px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon .icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 12px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card > .place-photo img {
    width: 44px;
    height: 44px;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate {
    border-color: transparent;
    background: transparent;
    color: var(--mv-accent-deep);
  }
  /* La luz del día se montaba sobre la campana de avisos: en el teléfono el tema de día o noche ya lo dice. */
  html[data-live-experience] .product-layout .daylight-widget {
    display: none;
  }
  /* «Mapa / Lista» repetía la barra inferior (Mapa / Explorar). */
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout .browse-view-controls {
    display: none;
  }
}
/* El número de resultados ya está en la pestaña y en los temas: con una categoría abierta sólo lo oyen los
 * lectores de pantalla. */
html[data-live-experience] .discovery-panel:has(#tourism-themes:not([hidden])) #result-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Tarjeta «Hoy»: un solo rótulo para las novedades, flecha en lo que se toca y atribución sin subrayado. */
html[data-live-experience] .today-card__rows .today-card__group {
  display: block;
  min-height: 0;
  padding: 8px 0 0;
  border: 0;
  color: var(--mv-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-live-experience] .today-card__rows .today-card__group[hidden] {
  display: none;
}
html[data-live-experience] .today-card__rows .today-card__group + li {
  border-top: 0;
}
html[data-live-experience] .today-card__rows .today-card__link::after {
  color: var(--mv-muted);
  font-size: 1rem;
  content: "›";
}
html[data-live-experience] .today-card__rows .today-card__link p a {
  color: var(--mv-text);
  font-weight: 500;
}
html[data-live-experience] .today-card__src a {
  text-decoration: none;
}
html[data-live-experience] .today-card__rows .today-card__src {
  font-size: 0.625rem;
}
html[data-live-experience][data-daylight="noche"] .today-card__rows .today-card__link p a {
  color: var(--live-ink);
}
/* Ajustes del orden visual: estado como texto con «·» (sin el punto de color heredado), dirección en una línea,
 * «Ubicación referencial» y similares en gris (el ámbar queda para «de turno» o información por confirmar). */
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > :is(.source-badge, .state-badge)::before,
html[data-live-experience] #catalog-results .catalog-card__badges > :is(.source-badge, .state-badge)::before {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > * + *::after,
html[data-live-experience] #catalog-results .catalog-card__badges > * + *::after {
  display: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row > *:not(:last-child)::after,
html[data-live-experience] #catalog-results .catalog-card__badges > *:not(:last-child)::after {
  display: inline;
  margin: 0 6px;
  color: var(--mv-muted);
  content: "·";
}
html[data-live-experience] #detail-sheet #detail-content .detail-status-row .source-badge--business {
  border: 0;
  background: none;
}
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges > * + *::before {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges :is(.source-badge, .state-badge) {
    color: var(--mv-muted);
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__badges
    :is([class*="duty"], [class*="stale"], [class*="failed"], [class*="expired"], [class*="pending"]) {
    color: #b86a00;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__body > .catalog-card__meta:has(strong)
    small:first-child {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__meta:has(strong) small:first-child::before,
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]) ~ #catalog-results > .catalog-card
    .catalog-card__icon--rentals ~ .catalog-card__body .catalog-card__meta:has(strong) small:first-child::before {
    margin: 0 5px;
    font: inherit;
    vertical-align: baseline;
    content: "·";
  }
}
/* «Cerca de aquí»: las tarjetas sin foto llevan un recuadro con el ícono de Turismo del mismo alto. */
html[data-live-experience] #detail-sheet #detail-content .detail-related li {
  grid-template-rows: 1fr auto;
}
html[data-live-experience] #detail-sheet #detail-content .detail-related .detail-related-place:not(:has(img))::before {
  display: grid;
  height: 92px;
  place-items: center;
  background: color-mix(in srgb, var(--cf-link, #0e7f64) 10%, transparent);
  color: var(--cf-link, #0e7f64);
  font: 400 26px/1 "Material Symbols Rounded";
  content: "\E3F7";
  content: "\E3F7" / "";
}
/* Teléfono: sin el conmutador lista/mapa (lo hace la barra inferior) las pestañas y «…» comparten una fila. */
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls [data-view-controls-slot] {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .live-city-modes {
    overflow-x: auto;
    scrollbar-width: none;
  }
}
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #browse-controls
    .live-city-modes:has(> button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])) {
    order: 1;
    flex: 1 1 0;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #browse-controls .product-more-filters {
    order: 2;
  }
}
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"] .product-layout #browse-controls
    .live-city-modes:has(> button:not([hidden]) ~ button:not([hidden]) ~ button:not([hidden])) {
    mask-image: linear-gradient(to right, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  }
}
/* Atención del negocio con la misma lista de íconos que «Antes de ir»; la fecha de actualización en gris. */
html[data-live-experience] #detail-sheet #detail-content .detail-service .tourist-check small {
  display: block;
  color: var(--live-ink-mute, var(--mv-muted));
  font-size: 0.6875rem;
}
html[data-live-experience] #detail-sheet #detail-content .detail-service .tourist-check li {
  grid-template-columns: 16px 96px minmax(0, 1fr);
}
/* Comercios y Oficios: el rubro ya dice qué es; la etiqueta genérica («Oficio o profesional») no se repite. */
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]):not([data-layer="tourism"]) ~ #catalog-results > .catalog-card
    .catalog-card__body > .catalog-card__meta:not(:has(strong)) {
    display: none;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]):not([data-layer="tourism"]) ~ #catalog-results > .catalog-card
    .catalog-card__body > .catalog-card__meta:has(strong) {
    grid-column: 1 / -1;
  }
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #tourism-themes:not([hidden]):not([data-layer="tourism"]) ~ #catalog-results > .catalog-card
    .catalog-card__body > .catalog-card__meta:has(strong) small:first-child::before {
    display: none;
  }
}
/* ---------- Orden visual, segundo lote (02/10/2026, plan sintetizado) ---------- */
/* Procedencia al pie de la ficha: un párrafo gris en vez de seis filas. */
html[data-live-experience] #detail-sheet #detail-content .detail-provenance .detail-data {
  display: block;
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
  line-height: 1.6;
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance .detail-data > div {
  display: inline;
  padding: 0;
  border: 0;
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance .detail-data > div + div::before {
  content: " · ";
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance :is(dt, dd) {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}
html[data-live-experience] #detail-sheet #detail-content .detail-provenance dt::after {
  content: ": ";
}
/* Filas: los estados normales de turismo y de negocio quedan para la ficha (sólo para lectores en la lista). */
html[data-live-experience] #catalog-results .catalog-card__badges
  > :is(.state-badge--reference_location, .state-badge--owner_declared) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-live-experience] #catalog-results .catalog-card__badges:not(:has(> :not(.state-badge--reference_location,
  .state-badge--owner_declared))) {
  margin: 0;
}
@media (max-width: 39.99rem) {
  html[data-live-experience][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__locate {
    width: 48px;
    height: 48px;
  }
  html[data-live-experience][data-daylight="noche"][data-product-page="map"][data-discovery-view="list"]
    .product-layout #catalog-results > .catalog-card .catalog-card__icon {
    background: transparent;
  }
}
/* El total ya está en la pestaña: el chip «Todo» no lo repite (sólo para lectores). */
html[data-live-experience] #tourism-themes [data-category=""] [data-theme-count] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Carrusel «Para conocer» más bajo, con el crédito sobre la foto. */
html[data-live-experience] .tourism-carousel__card {
  position: relative;
  grid-template-rows: 124px auto;
}
html[data-live-experience] .tourism-carousel__card img {
  height: 124px;
}
html[data-live-experience] .tourism-carousel__credit,
html[data-live-experience][data-daylight="noche"] .tourism-carousel__credit {
  position: absolute;
  top: 102px;
  left: 10px;
  color: #ffffff;
  font-size: 0.59375rem;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}
/* Muro: toda la tarjeta abre la publicación; contacto, reacciones y «Resuelto» siguen encima. */
html[data-live-experience] #publicaciones .wall-post {
  position: relative;
}
html[data-live-experience] #publicaciones .wall-post__title::after {
  position: absolute;
  inset: 0;
  content: "";
}
html[data-live-experience] #publicaciones :is(.wall-post__actions, .wall-resolve) {
  position: relative;
  z-index: 1;
}
html[data-live-experience] #publicaciones .wall-post__more {
  color: var(--mv-accent-deep);
  font-size: 0.71875rem;
  font-weight: 500;
}
html[data-live-experience] #publicaciones .wall-post--resolved {
  opacity: 1;
}
html[data-live-experience] #publicaciones .wall-post--resolved :is(h3, .wall-post__body) {
  opacity: 0.72;
}
/* La tarjeta de administración deshabilitada era una puerta que no abre: no se muestra. */
html[data-live-experience] #detail-sheet #detail-content .detail-ownership:has([data-open-business-claim]:disabled) {
  display: none;
}
/* Barra de la ficha: cada ícono con su nombre debajo («todo ícono va con texto», NN/g); el nombre accesible sigue
 * siendo el del botón. */
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal {
  gap: 2px;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal button {
  display: grid;
  grid-template-rows: 22px auto;
  place-items: center;
  gap: 2px;
  width: auto;
  min-width: 56px;
  height: 52px;
  min-height: 48px;
  padding: 4px 4px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock .detail-dock__personal button::after {
  color: var(--live-ink-soft);
  font: 500 0.65625rem/1 var(--font-sans);
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-save-place]::after {
  content: "Guardar";
  content: "Guardar" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-save-place][aria-pressed="true"]::after {
  content: "Guardado";
  content: "Guardado" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-account-bookmark]::after {
  content: "En cuenta";
  content: "En cuenta" / "";
}
html[data-live-experience] #detail-sheet #detail-content > .detail-dock [data-share-place]::after {
  content: "Compartir";
  content: "Compartir" / "";
}
/* «¿Eres responsable de este negocio?»: una fila fina con enlace, no una tarjeta. */
html[data-live-experience] #detail-sheet #detail-content .detail-ownership {
  display: grid;
  gap: 4px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--live-border-soft);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-live-experience] #detail-sheet #detail-content .detail-ownership strong {
  font-size: 0.75rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .detail-ownership p {
  margin: 0;
  color: var(--live-ink-soft);
  font-size: 0.71875rem;
}
html[data-live-experience] #detail-sheet #detail-content .detail-ownership button:not([hidden]) {
  justify-self: start;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cf-link);
  font-size: 0.75rem;
  font-weight: 600;
}
html[data-live-experience] #detail-sheet #detail-content .detail-ownership button:not([hidden])::after {
  content: " ›";
}
/* Vista general en grupos por puerta: título del grupo con su total y «Ver solo …» como enlace. */
html[data-live-experience] #catalog-results > .catalog-shelf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 2px;
  color: var(--mv-muted);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-live-experience] #catalog-results > .catalog-shelf:first-child {
  margin-top: 4px;
}
html[data-live-experience] #catalog-results > .catalog-shelf button {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mv-accent-deep);
  font: 600 0.71875rem/1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
html[data-live-experience][data-daylight="noche"] #catalog-results > .catalog-shelf button {
  color: var(--mv-accent);
}
/* En el teléfono, con todos los lugares, el título repetía el selector de arriba: los grupos ya dicen qué hay. */
@media (max-width: 39.99rem) {
  html[data-live-experience] #results-panel[data-scope="all"] :is(#results-title, #result-summary) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}