/* Mind OS — one platform language across every app. */
:root {
  --mind-os-bar-h: 52px;
  --mind-os-grid: rgba(255,255,255,.026);
  --mind-os-line: rgba(255,255,255,.11);
}

:root[data-theme="light"] {
  --mind-os-grid: rgba(11,19,32,.035);
  --mind-os-line: rgba(11,19,32,.12);
}

.mind-os-frame {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ws-bg-0);
}

.mind-os-canvas {
  flex: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  background-image:
    linear-gradient(var(--mind-os-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mind-os-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

.mind-os-canvas > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.mind-os-bar {
  height: var(--mind-os-bar-h);
  min-height: var(--mind-os-bar-h);
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--ws-bg-1) 94%, transparent);
  border-bottom: 1px solid var(--mind-os-line);
  color: var(--ws-fg-1);
  font-family: var(--ws-font);
  position: relative;
  z-index: 72;
}

.mind-os-bar::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: -1px;
  width: 48px;
  height: 2px;
  background: var(--ws-accent);
}

.mind-os-brand,
.mind-os-current,
.mind-os-action,
.mind-os-user {
  display: inline-flex;
  align-items: center;
}

.mind-os-brand {
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ws-fg-1);
  cursor: pointer;
  font-family: 'Sora', var(--ws-font);
}

.mind-os-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  letter-spacing: .12em;
  font-size: 12px;
}

.mind-os-wordmark b { font-weight: 800; }
.mind-os-wordmark span { color: var(--ws-accent); font-weight: 600; }

.mind-os-divider {
  width: 1px;
  height: 24px;
  background: var(--mind-os-line);
}

.mind-os-current { gap: 9px; min-width: 0; }
.mind-os-current-copy { display: flex; flex-direction: column; min-width: 0; }
.mind-os-current-copy strong {
  font-family: 'Sora', var(--ws-font);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.mind-os-current-copy small {
  margin-top: 2px;
  color: var(--ws-fg-4);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mind-os-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.mind-os-domain {
  margin-right: 4px;
  color: var(--ws-fg-4);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.mind-os-action {
  height: 32px;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  background: var(--ws-bg-2);
  color: var(--ws-fg-2);
  font-family: var(--ws-font);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.mind-os-action:hover {
  color: var(--ws-accent);
  border-color: color-mix(in srgb, var(--ws-accent) 55%, transparent);
  background: var(--ws-accent-soft);
}

.mind-os-action kbd {
  color: var(--ws-fg-4);
  font: 500 9px/1 'JetBrains Mono', monospace;
}

.mind-os-action.neuron { padding-left: 5px; }

.mind-os-user {
  width: 30px;
  height: 30px;
  justify-content: center;
  border: 1px solid var(--ws-border-mid);
  border-radius: 50%;
  background: var(--ws-bg-2);
  color: var(--ws-fg-2);
  font: 750 9px/1 'Sora', var(--ws-font);
  cursor: pointer;
}

.mind-app-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--ws-accent) 42%, transparent);
  border-radius: 28%;
  background: var(--ws-accent-soft);
  color: var(--ws-accent);
}

.mind-app-mark.inverse {
  background: var(--ws-accent);
  color: #0B1320;
  border-color: var(--ws-accent);
}

/* Hub: editorial hierarchy — decisions first, applications second. */
.hub.mind-os-hub { padding-top: 0; }
.mind-os-hub .hub-header { margin-bottom: 18px; }
.mind-os-hub .hub-greet {
  max-width: 900px;
  font-family: 'Sora', var(--ws-font);
  font-size: clamp(27px, 3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.mind-os-hub .hub-sub { max-width: 650px; }
.mind-os-hub .hub-cc-side { border-radius: 16px; }
.mind-os-hub .hub-cc-group { letter-spacing: .14em; }

.mind-os-module-media {
  background: var(--ws-bg-2) !important;
  border-bottom: 1px solid var(--ws-border);
}

.mind-os-module-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--mind-os-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mind-os-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.mind-os-module-kicker {
  color: var(--ws-fg-4);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mind-os-nav-mark { border-radius: 8px; }

.mind-os-signal {
  border-left: 2px solid var(--ws-accent);
  padding-left: 12px;
}

@media (max-width: 760px) {
  :root { --mind-os-bar-h: 46px; }
  .mind-os-bar { padding: 0 10px; gap: 8px; }
  .mind-os-bar::after { left: 10px; width: 36px; }
  .mind-os-wordmark span,
  .mind-os-current-copy small,
  .mind-os-domain,
  .mind-os-action span,
  .mind-os-action kbd,
  .mind-os-action.neuron { display: none; }
  .mind-os-divider { height: 20px; }
  .mind-os-action { width: 30px; padding: 0; justify-content: center; }
  .mind-os-current-copy strong { font-size: 11px; }
  .mind-os-canvas { background-size: 32px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .mind-os-action { transition: none; }
}


/* ─────────────────────────────────────────────────────────────
   Leaflet 1.9.4 — CSS incorporado, no un <link> a unpkg.
   style-src de la CSP no incluye unpkg, y añadirlo abriría la política para
   cualquier hoja de estilo de ese origen. Aquí van solo las reglas de
   posicionamiento que el mapa necesita.
   Se han QUITADO las reglas con url(images/…): son el control de capas y los
   marcadores por defecto, que no se usan — los pines son divIcon de CSS puro.
   Dejarlas provocaría 404 de imágenes que no existen en este hosting.
   ───────────────────────────────────────────────────────────── */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
.leaflet-tile::selection {
	background: transparent;
}
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}
.leaflet-container img.leaflet-tile {
	mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }
.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}
.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}
.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}
.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}
.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}
.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}
.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}
.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}
.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;
	margin: -10px auto 0;
	pointer-events: auto;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}
.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}
.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}
.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}

/* ── Marcadores de Mind Territorio ──────────────────────────── */
/* El color entra por --pin desde el divIcon, para no generar una clase por
   etapa. El pin aproximado se distingue del exacto con un borde punteado:
   quien mira el mapa tiene que poder ver de un vistazo qué posiciones son de
   verdad y cuáles son el centro de un barrio. */
.tmap-pin {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pin, #94A3B8);
  border: 2.5px solid var(--ws-bg-0);
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  transition: transform 0.12s ease;
}
.tmap-pin-approx {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--pin, #94A3B8) 55%, var(--ws-bg-0));
  opacity: 0.9;
}
.tmap-pin-route {
  box-shadow: 0 0 0 3px var(--ws-accent), 0 1px 6px rgba(0,0,0,0.5);
}
.tmap-pin-sel { transform: scale(1.45); }
.leaflet-marker-icon:hover .tmap-pin { transform: scale(1.25); }

/* Número de orden de la parada dentro de la ruta */
.tmap-order {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ws-accent); color: #04121a;
  font: 800 10px/1 var(--ws-font, system-ui);
  border: 2px solid var(--ws-bg-0);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Sin filtro sobre las teselas: el basemap ya trae variante clara y oscura
   (territory-map.jsx elige según el tema). Filtrar apagaba también las
   etiquetas de calle, que es justo lo que hay que poder leer. */
.leaflet-container { background: var(--ws-bg-2); font-family: var(--ws-font, system-ui); }
.leaflet-control-attribution { font-size: 9px; background: color-mix(in srgb, var(--ws-bg-1) 82%, transparent) !important; color: var(--ws-fg-4) !important; }
.leaflet-control-attribution a { color: var(--ws-accent) !important; }
.leaflet-tooltip {
  background: var(--ws-bg-1); color: var(--ws-fg-1);
  border: 1px solid var(--ws-border); box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  font-size: 11.5px; border-radius: 8px;
}
.leaflet-tooltip-top:before { border-top-color: var(--ws-border); }

/* ═══════════════════════════════════════════════════════════════════════
   NEURON HUD — presencia global tipo J.A.R.V.I.S. (neuron-hud.jsx)
   El azul de Neuron (#22B5F5) es identidad de producto: NO sigue el acento
   del cliente. Contraste cuidado para tema claro y oscuro.
   ═══════════════════════════════════════════════════════════════════════ */

/* Orbe ambiental: Neuron siempre presente, abajo a la derecha. */
.nrh-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(34,181,245,0.45);
  background: radial-gradient(circle at 35% 30%, rgba(34,181,245,0.22), rgba(10,120,200,0.10));
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 6px 22px rgba(10,120,200,0.28), inset 0 0 12px rgba(34,181,245,0.18);
  transition: transform .18s cubic-bezier(0.22,1,0.36,1), box-shadow .18s;
  animation: nrh-dock-breath 4s ease-in-out infinite;
}
.nrh-dock:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(10,120,200,0.42), inset 0 0 16px rgba(34,181,245,0.3); }
.nrh-dock:focus-visible { outline: 2px solid #22B5F5; outline-offset: 3px; }
.nrh-dock-ping {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid rgba(34,181,245,0.5); animation: nrh-ping 2.6s ease-out infinite; pointer-events: none;
}
@keyframes nrh-dock-breath { 0%,100% { box-shadow: 0 6px 22px rgba(10,120,200,0.24), inset 0 0 12px rgba(34,181,245,0.16); } 50% { box-shadow: 0 6px 26px rgba(10,120,200,0.4), inset 0 0 18px rgba(34,181,245,0.3); } }
@keyframes nrh-ping { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }

/* Overlay + panel. */
.nrh-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: end center;
  padding: 0 18px 18px; background: rgba(3,10,18,0.42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: nrh-fade .2s ease both;
}
@media (min-width: 720px) { .nrh-overlay { place-items: center; padding: 24px; } }
/* Bajo 980px la barra de navegación móvil ocupa la franja inferior: sube el
   orbe por encima de ella para no tapar el último botón primario. */
@media (max-width: 979px) { .nrh-dock { bottom: calc(72px + env(safe-area-inset-bottom)); } }
@keyframes nrh-fade { from { opacity: 0; } to { opacity: 1; } }
.nrh-panel {
  width: min(440px, 100%); border-radius: 20px; overflow: hidden;
  max-height: calc(100dvh - 36px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(11,19,32,0.98), rgba(7,16,27,0.98));
  border: 1px solid rgba(34,181,245,0.32);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 0 40px rgba(34,181,245,0.06);
  color: #EAF6FF; font-family: var(--ws-font);
  animation: nrh-rise .28s cubic-bezier(0.22,1,0.36,1) both;
}
:root[data-theme="light"] .nrh-panel {
  background: linear-gradient(180deg, #ffffff, #f2f8fd);
  color: #0E1A26; border-color: rgba(10,120,200,0.35);
  box-shadow: 0 24px 70px rgba(10,60,110,0.22), inset 0 0 40px rgba(34,181,245,0.05);
}
@keyframes nrh-rise { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

.nrh-top { display: flex; align-items: center; padding: 14px 16px 6px; }
.nrh-brand { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.nrh-title { font-family: var(--ws-font-display); font-weight: 800; font-size: 15px; letter-spacing: 3px; color: #22B5F5; }
/* En tema claro el #22B5F5 sobre panel blanco no pasa AA — el azul profundo de
   Neuron (#0A78C8, misma identidad, no el acento del cliente) sí. */
:root[data-theme="light"] .nrh-title { color: #0A78C8; }
.nrh-phase { font-size: 11px; color: var(--ws-fg-4, rgba(255,255,255,0.6)); font-weight: 600; }
:root[data-theme="light"] .nrh-phase { color: #55697c; }
.nrh-x {
  width: 40px; height: 40px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: inherit;
  transition: background .16s ease, border-color .16s ease;
}
:root[data-theme="light"] .nrh-x { background: rgba(10,30,50,0.05); border-color: rgba(10,30,50,0.12); }
.nrh-x:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); }

/* El escenario: personaje + reactor + onda. */
.nrh-stage { position: relative; height: clamp(150px, 34vh, 210px); display: grid; place-items: center; }
/* Núcleo del reactor: un glow radial que late detrás del personaje. Sin él los
   arcos giran mecánicamente pero la energía no "respira" — es lo que da vida. */
.nrh-stage::before {
  content: ""; position: absolute; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,181,245,0.26), transparent 70%);
  animation: nrh-core 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes nrh-core { 0%,100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.nrh-avatar { position: absolute; display: grid; place-items: center; }
.nrh-avatar img { transition: opacity .18s ease; }
.nrh-reactor { position: absolute; }
.nrh-reactor .nrh-arc-a { transform-origin: center; animation: nrh-spin 9s linear infinite; }
.nrh-reactor .nrh-arc-b { transform-origin: center; animation: nrh-spin 6s linear infinite reverse; }
.nrh-reactor .nrh-arc-c { transform-origin: center; animation: nrh-spin 12s linear infinite; }
.nrh-reactor.on .nrh-arc-a { animation-duration: 3.2s; }
.nrh-reactor.on .nrh-arc-b { animation-duration: 2.4s; }
.nrh-reactor.on .nrh-arc-c { animation-duration: 7s; }
/* Al activarse, los arcos brillan; y cada fase tiene su propio pulso. */
.nrh-reactor.on circle { filter: drop-shadow(0 0 5px rgba(34,181,245,0.55)); transition: filter .3s ease; }
.nrh-thinking .nrh-reactor.on .nrh-arc-a { animation-duration: 5s; }
.nrh-speaking .nrh-reactor.on .nrh-arc-a { animation-duration: 2.4s; }
@keyframes nrh-spin { to { transform: rotate(360deg); } }

.nrh-wave { position: absolute; bottom: 6px; display: flex; gap: 5px; align-items: flex-end; height: 26px; opacity: 0; transition: opacity .2s; }
.nrh-wave.speaking, .nrh-wave.listening { opacity: 1; }
.nrh-wave span { width: 4px; height: 6px; border-radius: 3px; background: #22B5F5; }
.nrh-wave.speaking span { animation: nrh-bar 0.7s ease-in-out infinite; }
.nrh-wave.listening span { animation: nrh-bar 1.3s ease-in-out infinite; opacity: 0.7; }
@keyframes nrh-bar { 0%,100% { height: 6px; } 50% { height: 22px; } }

/* Conversación. */
.nrh-convo { padding: 4px 16px 6px; min-height: 64px; max-height: 200px; overflow-y: auto; }
.nrh-heard { font-size: 12.5px; color: #22B5F5; font-style: italic; margin-bottom: 8px; }
:root[data-theme="light"] .nrh-heard { color: #0A78C8; }
.nrh-q { font-size: 11.5px; color: var(--ws-fg-4, rgba(255,255,255,0.55)); margin-bottom: 3px; }
:root[data-theme="light"] .nrh-q { color: #6b7d8c; }
.nrh-a { font-size: 14px; line-height: 1.55; }
/* El markdown renderizado hereda la escala del texto plano (si no, rompe la
   altura del panel) y los turnos se separan para poder releer la conversación. */
.nrh-a .md-body { font-size: 14px; line-height: 1.55; }
.nrh-a .md-body > :first-child { margin-top: 0; }
.nrh-a .md-body > :last-child { margin-bottom: 0; }
.nrh-reply + .nrh-reply { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34,181,245,0.14); }
:root[data-theme="light"] .nrh-reply + .nrh-reply { border-top-color: rgba(10,120,200,0.16); }
.nrh-hint { font-size: 12.5px; line-height: 1.6; color: var(--ws-fg-4, rgba(255,255,255,0.62)); }
:root[data-theme="light"] .nrh-hint { color: #55697c; }
.nrh-err { margin-top: 8px; font-size: 12px; color: #FCA5A5; }
:root[data-theme="light"] .nrh-err { color: #DC2626; }

/* Controles. */
.nrh-controls { display: flex; gap: 10px; align-items: center; padding: 10px 16px 16px; }
.nrh-mic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 1px solid rgba(34,181,245,0.4); color: #22B5F5;
  background: rgba(34,181,245,0.1); font-size: 16px; transition: all .16s;
}
.nrh-mic:hover { background: rgba(34,181,245,0.2); }
.nrh-mic.on { background: #22B5F5; color: #fff; border-color: #22B5F5; animation: nrh-mic-pulse 1.3s ease-in-out infinite; }
@keyframes nrh-mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,181,245,0.45); } 50% { box-shadow: 0 0 0 8px rgba(34,181,245,0); } }
.nrh-form { flex: 1; display: flex; gap: 6px; }
.nrh-input {
  flex: 1; height: 44px; border-radius: 12px; padding: 0 14px; font-size: 13.5px; outline: none;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: inherit; font-family: var(--ws-font);
  transition: border-color .16s ease;
}
:root[data-theme="light"] .nrh-input { background: #fff; border-color: rgba(10,30,50,0.16); }
.nrh-input:focus { border-color: #22B5F5; }
.nrh-send {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; cursor: pointer;
  background: #22B5F5; color: #fff; border: none; font-size: 14px;
}
.nrh-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Capas holográficas del escenario (J.A.R.V.I.S.) ─────────────────────── */
/* Motas de energía orbitando el reactor: 6 puntos con radios y ritmos
   distintos. CSS puro, ningún dato falso — es ambiente, no información. */
.nrh-motes { position: absolute; width: 196px; height: 196px; pointer-events: none; }
.nrh-mote {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: #22B5F5; box-shadow: 0 0 6px rgba(34,181,245,0.8); opacity: 0.7;
  animation: nrh-orbit 7s linear infinite;
}
.nrh-mote.m1 { animation-duration: 9s;  width: 3px; height: 3px; opacity: 0.5; animation-delay: -3s; }
.nrh-mote.m2 { animation-duration: 11s; animation-delay: -5s; opacity: 0.45; }
.nrh-mote.m3 { animation-duration: 8s;  animation-direction: reverse; width: 3px; height: 3px; animation-delay: -2s; }
.nrh-mote.m4 { animation-duration: 13s; animation-direction: reverse; opacity: 0.35; animation-delay: -7s; }
.nrh-mote.m5 { animation-duration: 10s; width: 2.5px; height: 2.5px; animation-delay: -8s; opacity: 0.55; }
@keyframes nrh-orbit {
  from { transform: rotate(0deg)   translateX(88px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(88px) rotate(-360deg); }
}
/* Piso holográfico: elipse de luz bajo el personaje, como proyección. */
.nrh-holo-floor {
  position: absolute; bottom: 26px; width: 120px; height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(34,181,245,0.35), transparent 70%);
  filter: blur(2px); pointer-events: none;
  animation: nrh-floor 3.4s ease-in-out infinite;
}
@keyframes nrh-floor { 0%,100% { opacity: .55; transform: scaleX(.92); } 50% { opacity: 1; transform: scaleX(1.05); } }
/* Barrido de materialización: una línea de escaneo que recorre el escenario
   UNA vez al abrir el HUD (no en bucle — el bucle marearía). */
.nrh-scan {
  position: absolute; left: 12%; right: 12%; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(34,181,245,0.75), transparent);
  box-shadow: 0 0 12px rgba(34,181,245,0.5);
  animation: nrh-scan 0.9s cubic-bezier(0.22,1,0.36,1) 1 both;
}
@keyframes nrh-scan { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: 0.9; } 100% { transform: translateY(200px); opacity: 0; } }

/* Chips de agentes en el HUD. */
.nrh-agents { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 4px; }
.nrh-agent-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  color: #22B5F5; background: rgba(34,181,245,0.10); border: 1px solid rgba(34,181,245,0.35);
  transition: background .16s ease, border-color .16s ease;
}
.nrh-agent-chip:hover { background: rgba(34,181,245,0.2); border-color: rgba(34,181,245,0.6); }
:root[data-theme="light"] .nrh-agent-chip { color: #0A78C8; }

/* Selector de motor (compartido por HUD y ventanas). */
.nch-engine {
  height: 30px; border-radius: 9px; padding: 0 8px; font-size: 11.5px; font-weight: 700;
  background: rgba(34,181,245,0.10); border: 1px solid rgba(34,181,245,0.35); color: #22B5F5;
  font-family: var(--ws-font); cursor: pointer; outline: none; max-width: 130px;
  transition: border-color .16s ease;
}
.nch-engine:focus-visible { border-color: #22B5F5; }
.nch-engine option { background: #0B1320; color: #EAF6FF; }
:root[data-theme="light"] .nch-engine { color: #0A78C8; }
:root[data-theme="light"] .nch-engine option { background: #fff; color: #0E1A26; }
.nrh-top .nch-engine { margin-right: 8px; }

/* ── Ventanas flotantes de chat (neuron-chat.jsx) ────────────────────────── */
/* z-index 1100–1119: por encima del contenido, SIEMPRE debajo del HUD (1200). */
.nch-win {
  position: fixed; width: min(400px, calc(100vw - 16px));
  display: flex; flex-direction: column; max-height: min(560px, calc(100dvh - 90px));
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(11,19,32,0.98), rgba(7,16,27,0.98));
  border: 1px solid rgba(34,181,245,0.28);
  box-shadow: 0 18px 54px rgba(0,0,0,0.5), inset 0 0 30px rgba(34,181,245,0.05);
  color: #EAF6FF; font-family: var(--ws-font);
  animation: nrh-rise .24s cubic-bezier(0.22,1,0.36,1) both;
}
:root[data-theme="light"] .nch-win {
  background: linear-gradient(180deg, #ffffff, #f2f8fd);
  color: #0E1A26; border-color: rgba(10,120,200,0.30);
  box-shadow: 0 18px 54px rgba(10,60,110,0.2), inset 0 0 30px rgba(34,181,245,0.04);
}
.nch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; cursor: grab; user-select: none; touch-action: none;
  border-bottom: 1px solid rgba(34,181,245,0.16);
}
.nch-head:active { cursor: grabbing; }
.nch-win.sheet .nch-head { cursor: default; }
.nch-head-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nch-head-t { display: flex; flex-direction: column; min-width: 0; }
.nch-title { font-family: var(--ws-font-display); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; color: #22B5F5; }
:root[data-theme="light"] .nch-title { color: #0A78C8; }
.nch-sub { font-size: 10.5px; color: var(--ws-fg-4, rgba(255,255,255,0.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="light"] .nch-sub { color: #55697c; }
.nch-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  color: #22B5F5; background: rgba(34,181,245,0.14); border: 1px solid rgba(34,181,245,0.4);
}
.nch-av.agent { color: var(--ws-accent); background: color-mix(in srgb, var(--ws-accent) 14%, transparent); border-color: color-mix(in srgb, var(--ws-accent) 40%, transparent); }
.nch-head-btns { display: flex; gap: 6px; }
.nch-hbtn {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: inherit;
  transition: background .16s ease, border-color .16s ease;
}
:root[data-theme="light"] .nch-hbtn { background: rgba(10,30,50,0.05); border-color: rgba(10,30,50,0.12); }
.nch-hbtn:hover { background: rgba(34,181,245,0.16); border-color: rgba(34,181,245,0.4); }
.nch-body { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.nch-empty { font-size: 12px; line-height: 1.6; color: var(--ws-fg-4, rgba(255,255,255,0.6)); padding: 8px 4px; }
:root[data-theme="light"] .nch-empty { color: #55697c; }
.nch-bubble {
  max-width: 86%; border-radius: 13px; padding: 8px 12px; font-size: 13px; line-height: 1.5;
  animation: nch-pop .18s ease both;
}
@keyframes nch-pop { from { transform: translateY(5px); opacity: 0; } to { transform: none; opacity: 1; } }
.nch-bubble.user { align-self: flex-end; background: rgba(34,181,245,0.16); border: 1px solid rgba(34,181,245,0.30); }
.nch-bubble.model { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
:root[data-theme="light"] .nch-bubble.model { background: rgba(10,30,50,0.045); border-color: rgba(10,30,50,0.10); }
.nch-bubble.model.err { color: #FCA5A5; border-color: rgba(239,68,68,0.35); }
:root[data-theme="light"] .nch-bubble.model.err { color: #DC2626; }
.nch-bubble.model.busy { opacity: 0.6; }
.nch-text { white-space: pre-wrap; word-break: break-word; }
.nch-meta { margin-top: 5px; font-size: 10px; font-weight: 700; color: #22B5F5; opacity: 0.75; }
:root[data-theme="light"] .nch-meta { color: #0A78C8; }
.nch-foot { display: flex; gap: 6px; align-items: center; padding: 10px 12px 12px; }
.nch-input {
  flex: 1; min-width: 0; height: 40px; border-radius: 11px; padding: 0 12px; font-size: 13px; outline: none;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: inherit; font-family: var(--ws-font);
  transition: border-color .16s ease;
}
:root[data-theme="light"] .nch-input { background: #fff; border-color: rgba(10,30,50,0.16); }
.nch-input:focus { border-color: #22B5F5; }
.nch-send {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; cursor: pointer;
  background: #22B5F5; color: #fff; border: none; font-size: 13px;
}
.nch-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Píldoras de chats minimizados: a la izquierda del orbe de Neuron. */
.nch-minibar {
  position: fixed; right: 84px; bottom: 22px; z-index: 1119;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 60vw;
}
@media (max-width: 979px) { .nch-minibar { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.nch-pill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: #EAF6FF; background: rgba(11,19,32,0.94); border: 1px solid rgba(34,181,245,0.4);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: border-color .16s ease, transform .16s ease;
}
.nch-pill:hover { border-color: #22B5F5; transform: translateY(-1px); }
:root[data-theme="light"] .nch-pill { color: #0E1A26; background: rgba(255,255,255,0.96); border-color: rgba(10,120,200,0.4); }

/* ── Neuron con manos: tarjetas de acción + señales de vida ──────────────── */
/* Cabecera "pensando": línea de escaneo, mismo idioma azul que el HUD. */
.nch-head { position: relative; }
.nch-win.busy .nch-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #22B5F5 45%, #7FD4FF 50%, #22B5F5 55%, transparent);
  background-size: 220% 100%;
  animation: nch-scan 1.4s linear infinite;
}
@keyframes nch-scan { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* Typing: tres puntos en onda (fuera el spinner genérico). */
.nch-dots { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.nch-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: #22B5F5;
  animation: nch-dot 1.1s ease-in-out infinite;
}
.nch-dots i:nth-child(2) { animation-delay: .18s; }
.nch-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes nch-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Sugerencias de arranque (ventana de Neuron vacía). */
.nch-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.nch-sug {
  cursor: pointer; border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 700;
  font-family: var(--ws-font); color: #9fdcff;
  background: rgba(34,181,245,0.10); border: 1px solid rgba(34,181,245,0.32);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.nch-sug:hover { background: rgba(34,181,245,0.2); border-color: #22B5F5; transform: translateY(-1px); }
:root[data-theme="light"] .nch-sug { color: #0A78C8; background: rgba(10,120,200,0.08); border-color: rgba(10,120,200,0.3); }

/* Tarjetas de acción: la propuesta de Neuron esperando el clic humano. */
.nch-acts { align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding-left: 8px; }
.nch-act {
  --act-c: #22B5F5;
  position: relative; border-radius: 12px; padding: 9px 11px;
  background: color-mix(in srgb, var(--act-c) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--act-c) 34%, transparent);
  border-left: 3px solid var(--act-c);
  animation: nch-pop .2s ease both;
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.nch-act.done { border-color: rgba(35,196,131,0.5); border-left-color: #23C483; background: rgba(35,196,131,0.07); }
.nch-act.dismissed { opacity: .45; }
.nch-act.invalid, .nch-act.error { border-left-color: #EF4444; }
.nch-act-head { display: flex; align-items: center; gap: 8px; }
.nch-act-ic {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 11px; color: var(--act-c);
  background: color-mix(in srgb, var(--act-c) 15%, transparent);
}
.nch-act.done .nch-act-ic { color: #23C483; background: rgba(35,196,131,0.14); }
.nch-act-label { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.nch-act-state { font-size: 10px; font-weight: 700; color: var(--ws-fg-4, rgba(255,255,255,0.55)); }
.nch-act-state .fa-circle-check { color: #23C483; font-size: 14px; animation: nch-check .3s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes nch-check { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.nch-act-rows { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.nch-act-row { display: flex; gap: 8px; font-size: 11px; line-height: 1.45; }
.nch-act-row span { flex-shrink: 0; min-width: 74px; color: var(--ws-fg-4, rgba(255,255,255,0.55)); }
.nch-act-row b { font-weight: 700; word-break: break-word; }
.nch-act-why { margin-top: 6px; font-size: 10.5px; font-style: italic; color: var(--ws-fg-4, rgba(255,255,255,0.6)); }
.nch-act-err { margin-top: 6px; font-size: 11px; font-weight: 600; color: #FCA5A5; }
:root[data-theme="light"] .nch-act-err { color: #DC2626; }
.nch-act-btns { margin-top: 8px; display: flex; gap: 6px; }
.nch-act-go, .nch-act-no, .nch-act-view, .nch-act-all {
  cursor: pointer; border-radius: 9px; font-family: var(--ws-font); font-weight: 800; font-size: 11px;
  padding: 6px 12px; transition: filter .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
}
.nch-act-go { background: var(--act-c); border: none; color: #04121f; }
.nch-act-go:hover { filter: brightness(1.12); transform: translateY(-1px); }
.nch-act-no { background: transparent; border: 1px solid rgba(255,255,255,0.16); color: inherit; font-weight: 600; }
.nch-act-no:hover { border-color: rgba(255,255,255,0.34); }
:root[data-theme="light"] .nch-act-no { border-color: rgba(10,30,50,0.2); }
.nch-act-view { background: rgba(35,196,131,0.14); border: 1px solid rgba(35,196,131,0.4); color: #23C483; }
.nch-act-view:hover { background: rgba(35,196,131,0.24); }
.nch-act-all {
  align-self: flex-start; margin-top: 2px;
  background: linear-gradient(135deg, #22B5F5, #0A78C8); border: none; color: #fff;
  box-shadow: 0 6px 16px rgba(34,181,245,0.3);
}
.nch-act-all:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .nch-win.busy .nch-head::after, .nch-dots i, .nch-act,
  .nch-act-state .fa-circle-check, .nch-sug, .nch-act-go, .nch-act-all { animation: none !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Silencia TODO el movimiento del HUD, incluida la entrada del panel
     (nrh-rise: translate+scale, gatillo de mareo vestibular) y el float/breathe
     del propio Neuron — que vive fuera del contenedor .aiw y se le escapaba.
     Las capas holográficas nuevas (motas, piso, scan) y las ventanas de chat
     también entran aquí. */
  .nrh-dock, .nrh-dock-ping, .nrh-overlay, .nrh-panel, .nrh-stage::before,
  .nrh-reactor circle, .nrh-wave span, .nrh-mic.on,
  .nrh-mote, .nrh-holo-floor, .nrh-scan,
  .nch-win, .nch-bubble,
  .aiw-neuron.float, .aiw-neuron.glow::after { animation: none !important; }
  /* Congeladas se verían mal (línea fija, motas apiladas al centro): fuera. */
  .nrh-scan, .nrh-mote { display: none !important; }
}


/* ═══ NÚCLEO DE NEURON (neuron.jsx · Resumen) ═══════════════════════════
   Mismo idioma que el HUD: azul #22B5F5, reactor, motas, piso holográfico.
   Un solo producto en dos superficies, no dos productos. */
.nrc {
  --nrc-blue: #22B5F5; --nrc-deep: #0A78C8;
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(34,181,245,0.28);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(34,181,245,0.13), transparent 62%),
    radial-gradient(90% 120% at 50% 118%, rgba(10,120,200,0.16), transparent 60%),
    var(--ws-bg-1);
  box-shadow: inset 0 0 60px rgba(34,181,245,0.05);
}
:root[data-theme="light"] .nrc { border-color: rgba(10,120,200,0.26); }
/* Rejilla de fondo: profundidad, no ruido — se desvanece hacia los bordes. */
.nrc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(34,181,245,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,181,245,0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 52%, #000 28%, transparent 80%);
          mask-image: radial-gradient(72% 72% at 50% 52%, #000 28%, transparent 80%);
}
.nrc-tick { position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none;
  border: 2px solid rgba(34,181,245,0.42); }
.nrc-tick.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.nrc-tick.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.nrc-tick.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.nrc-tick.br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.nrc-head { position: relative; z-index: 3; display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 0; }
.nrc-kicker { font-family: var(--ws-font-display); font-weight: 800; font-size: 12px; letter-spacing: 4px; color: var(--nrc-blue); }
:root[data-theme="light"] .nrc-kicker { color: var(--nrc-deep); }
.nrc-phase { font-size: 11px; font-weight: 600; color: var(--ws-fg-4); }
.nrc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--nrc-blue); }
:root[data-theme="light"] .nrc-live { color: var(--nrc-deep); }
.nrc-live .nr-blink { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor; display: inline-block; }

.nrc-stage { position: relative; width: min(560px, 100%); aspect-ratio: 1/1; margin: 0 auto;
  display: grid; place-items: center; }
@media (max-width: 719px) { .nrc-stage { width: min(340px, 100%); } }

.nrc-ring { position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(34,181,245,0.16); }
.nrc-ring.r1 { inset: 4%; }
.nrc-ring.r2 { inset: 17%; border-style: dashed; border-color: rgba(34,181,245,0.11); }
.nrc-ring.r3 { inset: 30%; }
.nrc-sweep { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(34,181,245,0.22), transparent 46deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
  animation: nrc-sweep 9s linear infinite; }
@keyframes nrc-sweep { to { transform: rotate(360deg); } }
.nrc-dial { position: absolute; inset: 8%; width: 84%; height: 84%; pointer-events: none; overflow: visible; }

.nrc-heart { position: absolute; width: 220px; height: 220px; display: grid; place-items: center; }
.nrc-avatar { position: absolute; display: grid; place-items: center; }
@media (max-width: 719px) { .nrc-heart { width: 150px; height: 150px; transform: scale(.72); } }

.nrc-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 96px; padding: 8px 6px 9px; border-radius: 15px; cursor: pointer;
  background: color-mix(in srgb, var(--ws-bg-1) 88%, transparent);
  border: 1px solid rgba(34,181,245,0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ws-fg-2); font-family: var(--ws-font); text-align: center;
  transition: transform .18s cubic-bezier(0.22,1,0.36,1), border-color .18s ease, box-shadow .18s ease;
  /* OJO: fill-mode 'backwards', NO 'both'. Con 'both' el estado final de la
     animación gana al transform de :hover y la tarjeta no crece (es el mismo
     choque animación-vs-transform documentado en neuron.jsx:417-419). */
  animation: nrc-node-in .5s cubic-bezier(0.16,1,0.3,1) backwards;
}
@keyframes nrc-node-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.72); } }
.nrc-node:hover { transform: translate(-50%,-50%) scale(1.06); border-color: var(--nrc-blue);
  box-shadow: 0 8px 26px rgba(10,120,200,0.28); }
.nrc-node:focus-visible { outline: 2px solid var(--nrc-blue); outline-offset: 3px; }
.nrc-node.on { border-color: var(--nrc-blue); box-shadow: 0 0 0 1px var(--nrc-blue), 0 0 28px -6px var(--nrc-blue); }
.nrc-node.alert { border-color: color-mix(in srgb, var(--ws-prio-high) 55%, transparent); }
.nrc-node-ico { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 12px; color: var(--nrc-node-color); background: color-mix(in srgb, var(--nrc-node-color) 18%, transparent); }
.nrc-node-val { font-family: var(--ws-font-display); font-size: 18px; font-weight: 800; line-height: 1;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--ws-fg-1); }
.nrc-node-val.none { font-size: 15px; font-weight: 600; color: var(--ws-fg-4); }
.nrc-node-skel { height: 18px; width: 34px; border-radius: 6px; }
.nrc-node-lab { font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--ws-fg-4); }
.nrc-node-sub { font-size: 9.5px; color: var(--ws-fg-4); max-width: 84px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nrc-node-alert { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--ws-prio-high, #EF4444); color: #fff;
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--ws-bg-1); }

@media (prefers-reduced-motion: reduce) {
  .nrc-sweep { display: none !important; }
  .nrc-node { animation: none !important; }
}

/* ═══ LeadPro+ · Mi día (spx = experiencia premium de ventas) ═══════════════
   El "Centro operativo" renderizaba bien pero se veía plano: filas lavadas con
   casi todo vacío, tarjetas sin estados, cero movimiento. Este bloque le da
   vida SIN tocar ni un dato: entrada escalonada, hover que revela acciones,
   numeral fantasma del ranking, y una aurora lenta en el hero. Todo se apaga
   con prefers-reduced-motion. */
.spx-hero { position: relative; overflow: hidden; border-radius: 24px; color: #fff;
  background: linear-gradient(130deg, #081C3A 0%, #123B67 48%, #0F766E 100%);
  box-shadow: 0 20px 70px rgba(15,118,110,.22), inset 0 1px rgba(255,255,255,.18);
  animation: spx-in .45s cubic-bezier(.22,1,.36,1) both; }
/* Aurora: una luz que deriva despacio por el hero. Ambiente, no información. */
.spx-hero::before { content: ""; position: absolute; inset: -40%; pointer-events: none;
  background:
    radial-gradient(38% 52% at 72% 18%, rgba(103,232,249,.30), transparent 68%),
    radial-gradient(30% 44% at 18% 82%, rgba(20,184,166,.22), transparent 70%);
  animation: spx-aurora 16s ease-in-out infinite alternate; }
@keyframes spx-aurora { from { transform: translate3d(-3%,-2%,0) rotate(0deg); }
  to { transform: translate3d(3%,2%,0) rotate(4deg); } }
.spx-hero h1 { position: relative; }
.spx-hero h1::after { content: ""; position: absolute; left: 2px; bottom: -7px; height: 3px; width: 84px;
  border-radius: 999px; background: linear-gradient(90deg, #67E8F9, #14B8A6 70%, transparent);
  transform-origin: left; animation: spx-under .7s .25s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes spx-under { from { transform: scaleX(0); } }

/* Tarjetas-filtro: cuentan Y filtran. Estados de verdad: hover que levanta,
   activa con anillo del color de la métrica y su hairline que se enciende. */
.spx-stat { position: relative; overflow: hidden; text-align: left; cursor: pointer;
  padding: 13px 14px 15px; border-radius: 15px; font-family: var(--ws-font);
  border: 1px solid var(--ws-border); background: var(--ws-bg-1); color: var(--ws-fg-1);
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease, background .18s ease;
  animation: spx-pop .45s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.spx-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--spx-c) 55%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--spx-c) 16%, transparent); }
.spx-stat:active { transform: translateY(0) scale(.985); }
.spx-stat:focus-visible { outline: 2px solid var(--spx-c); outline-offset: 2px; }
.spx-stat.on { border-color: color-mix(in srgb, var(--spx-c) 70%, transparent);
  background: color-mix(in srgb, var(--spx-c) 9%, var(--ws-bg-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--spx-c) 45%, transparent), 0 10px 32px color-mix(in srgb, var(--spx-c) 15%, transparent); }
.spx-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px;
  background: var(--spx-c); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.22,1,.36,1); }
.spx-stat.on::after { transform: scaleX(1); }
@keyframes spx-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes spx-in { from { opacity: 0; transform: translateY(12px); } }

/* La cola: cada fila entra escalonada, respira al pasar el cursor y revela sus
   acciones. El ranking es un numeral fantasma gigante — se lee de reojo, no
   compite con el contenido. */
.spx-row { position: relative; overflow: hidden; display: grid;
  grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 13px 14px; border-radius: 15px; cursor: pointer;
  border: 1px solid var(--ws-border); background: var(--ws-bg-1);
  transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s ease, box-shadow .18s ease;
  animation: spx-pop .4s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.spx-row:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--spx-c) 50%, transparent);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 24px -12px var(--spx-c); }
:root[data-theme="light"] .spx-row:hover { box-shadow: 0 12px 34px rgba(15,15,15,.10), 0 0 24px -14px var(--spx-c); }
.spx-row:active { transform: translateY(0) scale(.996); }
/* Riel de urgencia: con .urgent late; sin ella es una barra serena. */
.spx-rail { position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--spx-c), color-mix(in srgb, var(--spx-c) 30%, transparent)); }
.spx-row.urgent .spx-rail { animation: spx-rail 2.2s ease-in-out infinite; }
@keyframes spx-rail { 0%,100% { box-shadow: 0 0 6px 0 var(--spx-c); } 50% { box-shadow: 0 0 14px 1px var(--spx-c); } }
/* Numeral fantasma del ranking. El número llega por `content: attr(data-rank)`
   y NO como nodo de texto: es decoración (el rank accesible se pinta aparte,
   como "#01"), y a 16% del acento su contraste es 1.17 — subirlo a 3:1 mataría
   el efecto. Decoración en CSS, información en el DOM. */
.spx-rank { position: absolute; right: 104px; top: 50%; transform: translateY(-50%);
  font-family: var(--ws-font-display); font-weight: 900; font-size: 46px; letter-spacing: -2px;
  color: color-mix(in srgb, var(--spx-c) 16%, transparent); pointer-events: none; user-select: none;
  font-variant-numeric: tabular-nums; }
.spx-rank::before { content: attr(data-rank); }
/* Barrido de luz al pasar: una sola pasada, ligada al hover. */
.spx-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 60%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--spx-c) 7%, transparent), transparent);
  transform: skewX(-14deg); transition: left .55s ease; pointer-events: none; }
.spx-row:hover::after { left: 120%; }
/* Acciones: presentes pero serenas; el hover las despierta. En táctil (sin
   hover) quedan siempre a plena opacidad. */
.spx-acts { display: flex; align-items: center; gap: 6px; opacity: .55;
  transform: translateX(4px); transition: opacity .18s ease, transform .18s ease; }
.spx-row:hover .spx-acts, .spx-row:focus-within .spx-acts { opacity: 1; transform: none; }
@media (hover: none) { .spx-acts { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .spx-hero, .spx-hero h1::after, .spx-stat, .spx-row { animation: none !important; }
  .spx-hero::before { animation: none !important; }
  .spx-row.urgent .spx-rail { animation: none !important; }
  .spx-row::after { display: none !important; }
  .spx-stat, .spx-row { transition: none; }
}

/* ═══ FICHA DEL LEAD · superficie de registro (LeadPro+) ═══════════════
   Lo que se adopta de los CRM de referencia (Twenty, Attio, Linear) sin
   copiar su producto:

   1. UNA PÁGINA DE REGISTRO, NO UN MODAL APRETADO. La ficha vivía en un
      modal con `maxHeight: 52vh`: la mitad de la pantalla para todo —
      contacto, consentimiento, propuestas y la cronología entera. Se
      leía por una rendija. Aquí la superficie ocupa lo que necesita.
   2. CABECERA FIJA. Nombre, empresa, etapa y acciones se quedan mientras
      se recorre la cronología. Perder de vista con quién estás hablando
      mientras lees su historial es cómo se manda el mensaje equivocado.
   3. DOS COLUMNAS. Los datos y las acciones a la izquierda; la
      cronología —la evidencia— a la derecha, con su propio scroll. En
      móvil se apilan: una columna de 320px no es una columna.
   4. EL SIGUIENTE PASO, PRIMERO. Es la única pregunta que importa al
      abrir un lead. El motor de ventas ya lo calcula (nextBestAction);
      hasta ahora no se enseñaba en ninguna parte.

   Sin colores nuevos: se reutilizan los tokens --ws-* del sistema. */

.lrp-surface { width: min(1080px, 96vw); max-width: 1080px; }

/* Cabecera fija sobre el cuerpo que se desplaza. */
.lrp-hero { position: sticky; top: 0; z-index: 3; }

/* Banda de siguiente paso — el color lo pone la prioridad, no la decoración. */
.lrp-next {
  --lrp-c: var(--ws-fg-4);
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; margin: 0 0 14px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--lrp-c) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--lrp-c) 32%, transparent);
  border-left: 3px solid var(--lrp-c);
}
.lrp-next.critical { --lrp-c: #EF4444; }
.lrp-next.high     { --lrp-c: #F59E0B; }
.lrp-next.medium   { --lrp-c: #60A5FA; }
.lrp-next.low      { --lrp-c: #34CEC6; }
.lrp-next.blocked  { --lrp-c: #9CA3AF; }
.lrp-next-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px;
  color: var(--lrp-c); background: color-mix(in srgb, var(--lrp-c) 16%, transparent);
}
.lrp-next-t { flex: 1; min-width: 0; }
.lrp-next-k {
  font-size: 8.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--lrp-c);
}
.lrp-next-l { font-size: 13.5px; font-weight: 800; color: var(--ws-fg-1); margin-top: 1px; line-height: 1.25; }
/* El PORQUÉ va siempre con el qué: una recomendación sin motivo se ignora
   la segunda vez que aparece. */
.lrp-next-r { font-size: 11px; color: var(--ws-fg-3); margin-top: 3px; line-height: 1.45; }
.lrp-next-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lrp-next-chip {
  font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--ws-bg-2); border: 1px solid var(--ws-border); color: var(--ws-fg-3);
}
.lrp-next-chip.due { color: #EF4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }

/* Cuerpo en dos columnas: datos+acciones | cronología. */
.lrp-body {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  max-height: 66vh;
}
.lrp-col { padding: 16px 18px; overflow-y: auto; min-width: 0; }
.lrp-col.side {
  border-left: 1px solid var(--ws-border);
  background: color-mix(in srgb, var(--ws-bg-2) 45%, transparent);
}
/* Encabezado de la cronología pegado arriba: al recorrer 40 entradas
   sigue diciendo qué se está mirando. */
.lrp-col.side > div > div:first-child {
  position: sticky; top: -16px; z-index: 1;
  padding: 6px 0 8px; margin-top: -6px;
  background: var(--ws-bg-1);
}

@media (max-width: 900px) {
  .lrp-body { grid-template-columns: 1fr; max-height: 62vh; overflow-y: auto; }
  .lrp-col { overflow: visible; max-height: none; }
  .lrp-col.side { border-left: none; border-top: 1px solid var(--ws-border); background: transparent; }
  .lrp-hero { position: static; }
}