/* =========================================================================
   TBCS Coffee Map 2.0
   Identidad real del sitio: marrón casi negro + crema. Sin bordes de 1px:
   las superficies se separan por luminancia y sombra. Tipografía heredada
   del tema (Gotham en producción), sin cargar webfonts.
   ========================================================================= */

.tbcs-map{
	/* Los dos únicos colores configurables; el resto se deriva. */
	--tbcs-primary:#211915;
	--tbcs-accent:#d6d0bd;
	--tbcs-height:85vh;

	--tbcs-bg:color-mix(in srgb, var(--tbcs-primary) 72%, #000);
	--tbcs-surface:color-mix(in srgb, var(--tbcs-primary) 95%, #fff);
	--tbcs-surface-2:color-mix(in srgb, var(--tbcs-primary) 88%, #fff);
	--tbcs-float:color-mix(in srgb, var(--tbcs-primary) 94%, #fff);
	--tbcs-text:#fff;
	--tbcs-muted:color-mix(in srgb, #fff 60%, var(--tbcs-bg));
	--tbcs-faint:color-mix(in srgb, #fff 34%, var(--tbcs-bg));
	--tbcs-on-accent:var(--tbcs-primary);
	--tbcs-map-void:#1b1613;
	--tbcs-shadow-sm:0 2px 10px rgba(0,0,0,.4);
	--tbcs-shadow:0 10px 34px rgba(0,0,0,.5);
	--tbcs-shadow-lg:0 -14px 44px rgba(0,0,0,.55);
	--tbcs-r-sm:9px;
	--tbcs-r:13px;
	--tbcs-r-lg:20px;
	--tbcs-pill:999px;
	--tbcs-ease:cubic-bezier(.22,.61,.36,1);

	container-type:inline-size;
	position:relative;
	display:block;
	height:var(--tbcs-height);
	min-height:520px;
	overflow:hidden;
	background:var(--tbcs-bg);
	color:var(--tbcs-text);
	font-size:15px;
	line-height:1.4;
	isolation:isolate;
	border-radius:var(--tbcs-r-lg);
	-webkit-tap-highlight-color:transparent;
}

@supports (height:100dvh){
	.tbcs-map{height:min(var(--tbcs-height), 100dvh)}
}

/* Pantalla completa: la del navegador y, donde no existe (iPhone), ocupando
   la ventana con posición fija. Las dos se ven igual. */
.tbcs-map:fullscreen,
.tbcs-map:-webkit-full-screen,
.tbcs-map.is-fullscreen{
	height:100% !important;
	max-height:none;
	min-height:0;
	border-radius:0;
}
.tbcs-map.is-fullscreen{
	position:fixed;
	inset:0;
	width:100%;
	height:100dvh !important;
	z-index:99999;
}

.tbcs-map--light,
.tbcs-map[data-theme="light"]{
	--tbcs-bg:#f6f4f0;
	--tbcs-surface:#fff;
	--tbcs-surface-2:#f0ece5;
	--tbcs-float:#fff;
	--tbcs-text:var(--tbcs-primary);
	--tbcs-muted:color-mix(in srgb, var(--tbcs-primary) 62%, #fff);
	--tbcs-faint:color-mix(in srgb, var(--tbcs-primary) 34%, #fff);
	--tbcs-accent-ink:var(--tbcs-primary);
	--tbcs-map-void:#e7e3da;
	--tbcs-shadow-sm:0 2px 10px rgba(33,25,21,.1);
	--tbcs-shadow:0 10px 30px rgba(33,25,21,.14);
	--tbcs-shadow-lg:0 -12px 38px rgba(33,25,21,.16);
}
.tbcs-map[data-theme="dark"]{
	--tbcs-bg:color-mix(in srgb, var(--tbcs-primary) 72%, #000);
	--tbcs-surface:color-mix(in srgb, var(--tbcs-primary) 95%, #fff);
	--tbcs-surface-2:color-mix(in srgb, var(--tbcs-primary) 88%, #fff);
	--tbcs-float:color-mix(in srgb, var(--tbcs-primary) 94%, #fff);
	--tbcs-text:#fff;
	--tbcs-muted:color-mix(in srgb, #fff 60%, var(--tbcs-bg));
	--tbcs-faint:color-mix(in srgb, #fff 34%, var(--tbcs-bg));
	--tbcs-map-void:#1b1613;
}
@media (prefers-color-scheme:light){
	.tbcs-map--auto:not([data-theme]){
		--tbcs-bg:#f6f4f0;
		--tbcs-surface:#fff;
		--tbcs-surface-2:#f0ece5;
		--tbcs-float:#fff;
		--tbcs-text:var(--tbcs-primary);
		--tbcs-muted:color-mix(in srgb, var(--tbcs-primary) 62%, #fff);
		--tbcs-faint:color-mix(in srgb, var(--tbcs-primary) 34%, #fff);
		--tbcs-map-void:#e7e3da;
		--tbcs-shadow-sm:0 2px 10px rgba(33,25,21,.1);
		--tbcs-shadow:0 10px 30px rgba(33,25,21,.14);
		--tbcs-shadow-lg:0 -12px 38px rgba(33,25,21,.16);
	}
}

.tbcs-map *,
.tbcs-map *::before,
.tbcs-map *::after{box-sizing:border-box}
.tbcs-map h1,.tbcs-map h2,.tbcs-map h3,.tbcs-map h4,.tbcs-map p,.tbcs-map ul,.tbcs-map ol,.tbcs-map figure{margin:0}
/* El tema del sitio pinta los encabezados de negro (a veces con !important) y
   sobre el marrón no se leían. Solo los encabezados llevan !important: dentro
   del mapa siempre heredan el color, así que no hay nada que pisar. Extenderlo
   a span/strong rompería los colores propios de las pastillas y las insignias. */
.tbcs-map h1,.tbcs-map h2,.tbcs-map h3,.tbcs-map h4,.tbcs-map h5,.tbcs-map h6{
	color:inherit !important;
	font-family:inherit;
	font-weight:700;
}
.tbcs-map p,.tbcs-map li,.tbcs-map strong,.tbcs-map b,.tbcs-map em,.tbcs-map small{
	font-family:inherit;
}
.tbcs-map ul,.tbcs-map ol{list-style:none;padding:0}

/* Blindaje contra los botones del tema: cada botón define sus colores con
   variables propias y esta regla, más específica, gana en todos los estados. */
.tbcs-map button,
.tbcs-map a:where(.tbcs-b){
	--b-bg:transparent;
	--b-fg:currentColor;
	--b-bg-h:var(--b-bg);
	--b-fg-h:var(--b-fg);
	font:inherit;
	letter-spacing:normal;
	text-transform:none;
	text-shadow:none;
	text-decoration:none;
	min-height:0;
	height:auto;
	width:auto;
	margin:0;
	padding:0;
	line-height:1.2;
	border:0;
	border-radius:0;
	box-shadow:none;
	text-align:inherit;
	cursor:pointer;
	transition:background-color .16s,color .16s,transform .16s;
}
.tbcs-map button,
.tbcs-map a.tbcs-b,
.tbcs-map button:focus,
.tbcs-map a.tbcs-b:focus{background:var(--b-bg);color:var(--b-fg);outline:none}
.tbcs-map button:hover,
.tbcs-map button:active,
.tbcs-map a.tbcs-b:hover,
.tbcs-map a.tbcs-b:active{background:var(--b-bg-h);color:var(--b-fg-h);text-decoration:none;border:0;box-shadow:none}
.tbcs-map button:disabled{opacity:.35;cursor:default}
.tbcs-map button:disabled:hover{background:var(--b-bg);color:var(--b-fg)}
.tbcs-map :focus-visible{outline:2px solid var(--tbcs-accent);outline-offset:2px;border-radius:4px}

.tbcs-map input,.tbcs-map select{
	font:inherit;color:inherit;letter-spacing:normal;text-transform:none;
	box-shadow:none;min-height:0;margin:0;line-height:1.2;
}
.tbcs-map svg[aria-hidden]{
	width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
	stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.tbcs-map [hidden]{display:none !important}

/* ---------------------------------------------------- estado de arranque */
/* Esqueleto con la forma final del mapa: la lista de nombres que había aquí
   antes hacía un salto muy feo al aparecer el mapa. */
.tbcs-boot{position:absolute;inset:0;z-index:40;background:var(--tbcs-bg);overflow:hidden;pointer-events:none}
.tbcs-boot__top{position:absolute;top:0;left:0;right:0;padding:14px 14px 0;display:flex;flex-direction:column;gap:9px}
.tbcs-boot__pod{height:52px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface)}
.tbcs-boot__chips{display:flex;gap:7px;overflow:hidden}
.tbcs-boot__chips span{height:36px;flex:none;border-radius:var(--tbcs-pill);background:var(--tbcs-surface)}
.tbcs-boot__sheet{position:absolute;left:0;right:0;bottom:0;height:252px;padding:10px 14px 0;background:var(--tbcs-bg);border-radius:var(--tbcs-r-lg) var(--tbcs-r-lg) 0 0}
.tbcs-boot__grab{width:38px;height:4px;margin:0 auto 14px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface-2)}
.tbcs-boot__tabs{display:flex;gap:14px;margin-bottom:14px}
.tbcs-boot__tabs span{height:16px;border-radius:5px;background:var(--tbcs-surface)}
.tbcs-boot__cards{display:flex;gap:11px}
.tbcs-boot__cards div{flex:0 0 200px;height:169px;border-radius:var(--tbcs-r);background:var(--tbcs-surface)}
.tbcs-boot__pod,
.tbcs-boot__chips span,
.tbcs-boot__tabs span,
.tbcs-boot__cards div{animation:tbcs-pulse 1.5s ease-in-out infinite}
@keyframes tbcs-pulse{0%,100%{opacity:.55}50%{opacity:.85}}

.tbcs-boot__status{
	position:absolute;left:0;right:0;bottom:14px;z-index:41;
	text-align:center;font-size:12.5px;color:var(--tbcs-faint);
}
.tbcs-map.is-ready .tbcs-boot,
.tbcs-map.is-ready .tbcs-boot__status{display:none}

/* Solo se ve si el navegador no ejecuta JavaScript. */
.tbcs-noscript{position:absolute;inset:0;z-index:45;overflow-y:auto;padding:20px 18px;background:var(--tbcs-bg)}
.tbcs-noscript p{font-size:13px;color:var(--tbcs-muted);margin-bottom:14px}
.tbcs-noscript ul{display:flex;flex-direction:column;gap:9px;font-size:14px}
.tbcs-noscript a{color:var(--tbcs-text);text-decoration:none}
.tbcs-noscript span{color:var(--tbcs-faint);font-size:12.5px;margin-left:8px}

.tbcs-fatal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--tbcs-muted);z-index:50;background:var(--tbcs-bg)}

/* --------------------------------------------------------------- escena */
.tbcs-stage{position:absolute;inset:0;z-index:0}
.tbcs-leaflet{position:absolute;inset:0;background:var(--tbcs-map-void);z-index:0}
.tbcs-map .leaflet-container{font:inherit;background:var(--tbcs-map-void)}
.tbcs-map .leaflet-control-attribution{
	background:color-mix(in srgb, var(--tbcs-bg) 76%, transparent);
	color:var(--tbcs-faint);font-size:10px;padding:2px 7px;border-radius:var(--tbcs-pill) 0 0 0;
}
.tbcs-map .leaflet-control-attribution a{color:var(--tbcs-muted)}
.tbcs-map .leaflet-control-zoom{border:0;box-shadow:var(--tbcs-shadow-sm);border-radius:var(--tbcs-r-sm);overflow:hidden}
.tbcs-map .leaflet-control-zoom a{background:var(--tbcs-float);color:var(--tbcs-text);border:0}
.tbcs-map .leaflet-control-zoom a:hover{background:var(--tbcs-surface-2);color:var(--tbcs-accent)}

/* ---------------------------------------------------- barra flotante top */
.tbcs-top{
	position:absolute;top:0;left:0;right:0;z-index:20;
	padding:14px 14px 0;display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.tbcs-top > *{pointer-events:auto}

.tbcs-pod{
	display:flex;align-items:center;gap:10px;
	padding:0 6px 0 16px;height:52px;
	background:color-mix(in srgb, var(--tbcs-float) 92%, transparent);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-radius:var(--tbcs-pill);
	box-shadow:var(--tbcs-shadow);
	margin:0;
}
.tbcs-pod__field{
	display:flex;align-items:center;gap:10px;
	flex:1;min-width:0;height:100%;margin:0;cursor:text;
}
.tbcs-pod__field > svg{color:var(--tbcs-faint);flex:none}
.tbcs-map .tbcs-pod input,
.tbcs-map .tbcs-pod input:focus{
	flex:1;min-width:0;width:100%;height:100%;padding:0;border:0;background:transparent;
	outline:none;box-shadow:none;font-size:16px;color:var(--tbcs-text);
}
.tbcs-map .tbcs-pod input::placeholder{color:var(--tbcs-faint);opacity:1}
.tbcs-map .tbcs-pod__clear{
	--b-fg:var(--tbcs-faint);--b-fg-h:var(--tbcs-text);
	width:34px;height:34px;display:grid;place-items:center;border-radius:50%;flex:none;
}
.tbcs-map .tbcs-pod__region{
	--b-bg:color-mix(in srgb, var(--tbcs-accent) 16%, transparent);
	--b-fg:var(--tbcs-accent);
	--b-bg-h:color-mix(in srgb, var(--tbcs-accent) 26%, transparent);
	display:flex;align-items:center;gap:5px;flex:none;
	height:38px;padding:0 14px;margin-right:2px;border-radius:var(--tbcs-pill);
	font-size:13px;font-weight:600;max-width:42%;
}
.tbcs-pod__region span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tbcs-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:0 2px 2px 0}
.tbcs-chips::-webkit-scrollbar{display:none}

/* Los carruseles horizontales se cortaban en seco contra el borde. Las clases
   las pone el JS solo cuando hay contenido fuera de la vista, para no
   desvanecer un final que no existe. */
.tbcs-fade{
	--fade:34px;
	-webkit-mask-image:linear-gradient(to right, #000 0, #000 100%);
	mask-image:linear-gradient(to right, #000 0, #000 100%);
}
.tbcs-fade.has-more-right{
	-webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
	mask-image:linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.tbcs-fade.has-more-left{
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade));
	mask-image:linear-gradient(to right, transparent 0, #000 var(--fade));
}
.tbcs-fade.has-more-left.has-more-right{
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
	mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.tbcs-map .tbcs-chip{
	--b-bg:color-mix(in srgb, var(--tbcs-float) 88%, transparent);
	--b-fg:var(--tbcs-muted);
	--b-bg-h:var(--tbcs-surface-2);
	--b-fg-h:var(--tbcs-text);
	flex:none;display:inline-flex;align-items:center;gap:6px;
	height:36px;padding:0 15px;border-radius:var(--tbcs-pill);
	font-size:13px;font-weight:600;white-space:nowrap;
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	box-shadow:var(--tbcs-shadow-sm);
}
.tbcs-map .tbcs-chip.is-on{
	--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-on-accent, var(--tbcs-primary));
	--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-on-accent, var(--tbcs-primary));
}
.tbcs-chip small{font-size:11px;opacity:.65;font-weight:600}
/* El chip de comuna es un selector, no un filtro de encendido/apagado: se
   distingue del resto con el color de acento. */
.tbcs-map .tbcs-chip--place{
	--b-bg:color-mix(in srgb, var(--tbcs-accent) 16%, var(--tbcs-float));
	--b-fg:var(--tbcs-accent);
	--b-bg-h:color-mix(in srgb, var(--tbcs-accent) 26%, var(--tbcs-float));
	--b-fg-h:var(--tbcs-accent);
	gap:4px;padding-right:11px;
}
.tbcs-map .tbcs-chip--place.is-on{
	--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);
	--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-primary);
}
.tbcs-chip--place svg{width:15px;height:15px;opacity:.75}
.tbcs-chip__label{max-width:13ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-map .tbcs-chip__icon{
	width:19px;height:19px;flex:none;margin-right:-1px;
	object-fit:contain;border-radius:50%;max-width:none;display:block;
}

/* ------------------------------------------------------- herramientas */
.tbcs-tools{position:absolute;top:118px;right:14px;z-index:19;display:flex;flex-direction:column;gap:8px;transition:top .3s var(--tbcs-ease)}
.tbcs-map .tbcs-tool{
	--b-bg:color-mix(in srgb, var(--tbcs-float) 92%, transparent);
	--b-fg:var(--tbcs-text);
	--b-bg-h:var(--tbcs-surface-2);
	--b-fg-h:var(--tbcs-accent);
	width:42px;height:42px;display:grid;place-items:center;border-radius:var(--tbcs-r);
	box-shadow:var(--tbcs-shadow-sm);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.tbcs-map .tbcs-tool.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-fg-h:var(--tbcs-primary)}

/* -------------------------------------------------------- bottom sheet */
.tbcs-sheet{
	position:absolute;left:0;right:0;bottom:0;z-index:25;
	height:var(--sheet-h,58%);
	display:flex;flex-direction:column;
	background:var(--tbcs-bg);
	border-radius:var(--tbcs-r-lg) var(--tbcs-r-lg) 0 0;
	box-shadow:var(--tbcs-shadow-lg);
	transform:translate3d(0,var(--sheet-y,0px),0);
	transition:transform .34s var(--tbcs-ease), height .34s var(--tbcs-ease);
	touch-action:none;
	will-change:transform;
}
.tbcs-sheet.is-dragging{transition:none}
.tbcs-map[data-sheet="peek"] .tbcs-sheet{height:202px;background:transparent;box-shadow:none}
.tbcs-map[data-sheet="mid"] .tbcs-sheet{height:52%}
.tbcs-map[data-sheet="full"] .tbcs-sheet{height:calc(100% - 132px)}

/* En "peek" el dock flota sobre el mapa: sin caja, solo las tarjetas. */
.tbcs-map[data-sheet="peek"] .tbcs-sheet::before{
	content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
	background:linear-gradient(to top,
		var(--tbcs-bg) 62%,
		color-mix(in srgb, var(--tbcs-bg) 92%, transparent) 76%,
		color-mix(in srgb, var(--tbcs-bg) 78%, transparent) 88%,
		color-mix(in srgb, var(--tbcs-bg) 55%, transparent));
	pointer-events:none;
}

.tbcs-map .tbcs-grab{
	flex:none;display:block;width:100%;padding:10px 0 6px;
	--b-bg:transparent;--b-bg-h:transparent;
	touch-action:none;
}
.tbcs-grab i{
	display:block;width:38px;height:4px;margin:0 auto;border-radius:var(--tbcs-pill);
	background:color-mix(in srgb, var(--tbcs-accent) 42%, transparent);
	transition:background-color .16s;
}
.tbcs-map .tbcs-grab:hover i{background:var(--tbcs-accent)}

.tbcs-sheet__head{position:relative;flex:none;display:flex;align-items:center;gap:6px;padding:0 14px 8px;overflow-x:auto;scrollbar-width:none}
.tbcs-sheet__head::-webkit-scrollbar{display:none}
.tbcs-map .tbcs-tab{
	--b-fg:var(--tbcs-muted);--b-fg-h:var(--tbcs-text);
	display:inline-flex;align-items:baseline;gap:6px;
	padding:5px 2px;margin-right:12px;font-size:14.5px;font-weight:700;white-space:nowrap;flex:none;
	border-bottom:2px solid transparent;
}
.tbcs-map .tbcs-tab[aria-selected="true"]{--b-fg:var(--tbcs-text);border-bottom-color:var(--tbcs-accent)}
.tbcs-tab em{
	font-style:normal;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
	border-radius:var(--tbcs-pill);background:var(--tbcs-accent);color:var(--tbcs-primary);
	font-size:11px;font-weight:700;
}
.tbcs-sheet__meta{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tbcs-faint);flex:none}
.tbcs-count{white-space:nowrap}

.tbcs-seg{display:flex;gap:2px;padding:3px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface-2);flex:none}
.tbcs-map .tbcs-seg button{
	--b-fg:var(--tbcs-muted);--b-fg-h:var(--tbcs-text);
	width:34px;height:28px;display:grid;place-items:center;border-radius:var(--tbcs-pill);
}
.tbcs-map .tbcs-seg button.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-fg-h:var(--tbcs-primary)}

.tbcs-sheet__body{flex:1;min-height:0;position:relative}
.tbcs-view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* En la vista de mapa el contenido es un riel horizontal: si el panel permite
   desplazamiento vertical aparece una barra que no lleva a ninguna parte. */
.tbcs-map[data-view="map"] .tbcs-view--near{overflow-y:hidden}
.tbcs-view[hidden]{display:none}

/* ------------------------------------------------------- riel de fichas */

.tbcs-rail{
	display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
	padding:2px 14px 14px;scroll-snap-type:x mandatory;scrollbar-width:none;
	--fade:48px;
}
.tbcs-rail::-webkit-scrollbar{display:none}
.tbcs-rail .tbcs-card{flex:0 0 156px;scroll-snap-align:start}
.tbcs-rail .tbcs-card__shot{aspect-ratio:auto;height:78px}

/* ----------------------------------------------------------- tarjetas */
.tbcs-card{
	position:relative;display:flex;flex-direction:column;
	border-radius:var(--tbcs-r);overflow:hidden;background:var(--tbcs-surface);
	box-shadow:var(--tbcs-shadow-sm);text-align:left;
	transition:transform .18s var(--tbcs-ease),box-shadow .18s;
}
.tbcs-card:hover{transform:translateY(-2px);box-shadow:var(--tbcs-shadow)}
.tbcs-map .tbcs-card__open{
	--b-bg:transparent;--b-bg-h:transparent;
	display:flex;flex-direction:column;width:100%;flex:1;
}
.tbcs-card__shot{position:relative;display:block;aspect-ratio:16/9;background:var(--tbcs-surface-2);overflow:hidden;flex:none}
.tbcs-card__shot img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.tbcs-card__initial{
	position:absolute;inset:0;display:grid;place-items:center;
	background:linear-gradient(140deg, var(--tbcs-surface-2), var(--tbcs-surface));
	color:color-mix(in srgb, var(--tbcs-accent) 70%, transparent);
	font-size:32px;font-weight:700;letter-spacing:.04em;
}
.tbcs-card__badge{
	position:absolute;left:7px;bottom:7px;
	display:inline-flex;align-items:center;gap:4px;
	padding:3px 8px;border-radius:var(--tbcs-pill);
	background:color-mix(in srgb, var(--tbcs-bg) 82%, transparent);
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	color:var(--tbcs-accent);font-size:9.5px;font-weight:700;letter-spacing:.03em;
	max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tbcs-card__km{
	position:absolute;right:7px;bottom:7px;padding:3px 8px;border-radius:var(--tbcs-pill);
	background:var(--tbcs-accent);color:var(--tbcs-primary);
	font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tbcs-card__body{padding:9px 11px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tbcs-card__body strong{display:block;color:var(--tbcs-text);font-size:13px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-card__body em{display:block;font-style:normal;font-size:11.5px;color:var(--tbcs-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El botón se superpone a la foto: así la tarjeta no necesita un pie propio
   y desaparece el hueco de color que dejaba bajo el nombre. */
.tbcs-map .tbcs-card__add{
	--b-bg:color-mix(in srgb, var(--tbcs-bg) 74%, transparent);
	--b-fg:#fff;
	--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-primary);
	position:absolute;top:7px;right:7px;z-index:2;
	width:27px;height:27px;display:grid;place-items:center;border-radius:50%;
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.tbcs-map .tbcs-card__add.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-primary)}
.tbcs-map .tbcs-card__add svg{width:15px;height:15px;stroke-width:2.2}

/* ------------------------------------------------- lista virtualizada */
.tbcs-listwrap{position:relative;padding:0 14px 20px}
.tbcs-listwrap__runner{position:relative}
.tbcs-row{
	position:absolute;left:0;right:0;height:78px;display:flex;align-items:center;gap:10px;
	padding:0 6px;border-radius:var(--tbcs-r);
}
.tbcs-row:hover{background:var(--tbcs-surface)}
.tbcs-map .tbcs-row__open{
	--b-bg:transparent;--b-bg-h:transparent;
	flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:100%;
}
.tbcs-row__img{
	position:relative;width:58px;height:58px;flex:none;border-radius:var(--tbcs-r-sm);overflow:hidden;
	background:var(--tbcs-surface-2);display:grid;place-items:center;
	color:color-mix(in srgb, var(--tbcs-accent) 70%, transparent);font-weight:700;font-size:17px;
}
.tbcs-row__img img{width:100%;height:100%;object-fit:cover;display:block;max-width:100%}
.tbcs-row__txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.tbcs-row__txt strong{color:var(--tbcs-text);font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-row__txt span{font-size:12.5px;color:var(--tbcs-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-row__txt b{font-size:11.5px;color:var(--tbcs-accent);font-weight:700;font-variant-numeric:tabular-nums}
.tbcs-map .tbcs-row__add{
	--b-bg:var(--tbcs-surface-2);--b-fg:var(--tbcs-text);
	--b-bg-h:color-mix(in srgb, var(--tbcs-accent) 32%, var(--tbcs-surface-2));
	width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--tbcs-r-sm);
}
.tbcs-map .tbcs-row__add.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-primary)}

/* --------------------------------------------------- rejilla tarjetas */
.tbcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;padding:2px 14px 20px}

/* ------------------------------------------------------------- vacío */
.tbcs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:44px 20px;color:var(--tbcs-muted)}
.tbcs-map .tbcs-empty > svg{width:34px;height:34px;color:var(--tbcs-faint)}
.tbcs-empty h3{font-size:17px;font-weight:700;color:var(--tbcs-text)}
.tbcs-empty p{font-size:13.5px;max-width:34ch}

/* ------------------------------------------------------------- botones */
.tbcs-map .tbcs-btn{
	--b-bg:var(--tbcs-surface-2);--b-fg:var(--tbcs-text);
	--b-bg-h:color-mix(in srgb, var(--tbcs-accent) 24%, var(--tbcs-surface-2));
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:12px 20px;border-radius:var(--tbcs-r);font-size:14px;font-weight:700;white-space:nowrap;
}
.tbcs-map .tbcs-btn--accent{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-bg-h:color-mix(in srgb,var(--tbcs-accent) 86%,#000);--b-fg-h:var(--tbcs-primary)}
.tbcs-map .tbcs-btn--quiet{--b-bg:transparent;--b-fg:var(--tbcs-muted);--b-bg-h:var(--tbcs-surface-2);--b-fg-h:var(--tbcs-text)}
.tbcs-map .tbcs-btn--block{width:100%}
.tbcs-row-btns{display:flex;gap:8px;flex-wrap:wrap}
.tbcs-row-btns .tbcs-btn{flex:1}

/* --------------------------------------------------------------- ruta */
.tbcs-pad{padding:2px 16px 22px;display:flex;flex-direction:column;gap:14px}
.tbcs-modes{display:flex;gap:3px;padding:3px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface-2)}
.tbcs-map .tbcs-modes button{
	--b-fg:var(--tbcs-muted);--b-fg-h:var(--tbcs-text);
	flex:1;padding:9px;border-radius:var(--tbcs-pill);text-align:center;font-size:13px;font-weight:700;
}
.tbcs-map .tbcs-modes button.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-fg-h:var(--tbcs-primary)}
.tbcs-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tbcs-muted);cursor:pointer;margin:0}
.tbcs-check input{width:18px;height:18px;accent-color:var(--tbcs-accent)}
.tbcs-summary{
	display:flex;flex-direction:column;gap:3px;padding:15px 17px;border-radius:var(--tbcs-r);
	background:var(--tbcs-accent);color:var(--tbcs-primary);
}
.tbcs-summary:empty{display:none}
.tbcs-summary b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.tbcs-summary small{font-size:11.5px;opacity:.72;font-weight:600}
.tbcs-stops{display:flex;flex-direction:column}
.tbcs-stop{display:flex;align-items:center;gap:12px;padding:9px 0}
.tbcs-stop__n{
	width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:var(--tbcs-r-sm);
	background:var(--tbcs-accent);color:var(--tbcs-primary);font-size:12px;font-weight:700;
}
.tbcs-map .tbcs-stop__name{--b-bg:transparent;--b-bg-h:transparent;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tbcs-stop__name strong{color:var(--tbcs-text);font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-stop__name span{font-size:12px;color:var(--tbcs-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbcs-stop__tools{display:flex;gap:2px;flex:none}
.tbcs-map .tbcs-stop__tools button{
	--b-fg:var(--tbcs-faint);--b-fg-h:var(--tbcs-text);--b-bg-h:var(--tbcs-surface-2);
	width:30px;height:30px;display:grid;place-items:center;border-radius:var(--tbcs-r-sm);
}
.tbcs-note{font-size:12px;color:var(--tbcs-faint);text-align:center}

/* ------------------------------------------------------- indicaciones */
.tbcs-steps__box{border-radius:var(--tbcs-r);background:var(--tbcs-surface);overflow:hidden}
.tbcs-map .tbcs-steps__box summary{
	list-style:none;cursor:pointer;
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:14px 16px;font-size:14px;font-weight:700;
}
.tbcs-steps__box summary::-webkit-details-marker{display:none}
.tbcs-steps__box summary em{
	margin-left:auto;margin-right:2px;font-style:normal;
	font-size:12px;font-weight:600;color:var(--tbcs-muted);
}
.tbcs-steps__box summary::after{
	content:"";flex:none;width:9px;height:9px;
	border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .2s;
}
.tbcs-steps__box[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.tbcs-steps__body{padding:0 8px 10px}
.tbcs-steps__leg{
	display:flex;align-items:center;gap:7px;flex-wrap:wrap;
	padding:12px 8px 8px;font-size:12px;font-weight:700;color:var(--tbcs-muted);
}
.tbcs-steps__leg b{
	display:grid;place-items:center;width:19px;height:19px;flex:none;
	border-radius:var(--tbcs-r-sm);background:var(--tbcs-accent);color:var(--tbcs-primary);
	font-size:11px;
}
.tbcs-steps__leg span{font-weight:400;opacity:.7}
.tbcs-steps__list{display:flex;flex-direction:column;position:relative;padding-left:9px}
.tbcs-steps__list::before{
	content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;
	background:color-mix(in srgb, var(--tbcs-accent) 24%, transparent);border-radius:2px;
}
.tbcs-map .tbcs-step{
	--b-bg:transparent;--b-bg-h:var(--tbcs-surface-2);
	position:relative;display:flex;align-items:baseline;gap:10px;width:100%;
	padding:8px 10px 8px 22px;border-radius:var(--tbcs-r-sm);
}
.tbcs-step::before{
	content:"";position:absolute;left:1px;top:14px;width:8px;height:8px;border-radius:50%;
	background:var(--tbcs-bg);box-shadow:0 0 0 2px color-mix(in srgb, var(--tbcs-accent) 55%, transparent);
}
.tbcs-step__txt{flex:1;font-size:13.5px;line-height:1.4}
.tbcs-step__km{
	flex:none;font-size:11.5px;font-weight:700;color:var(--tbcs-muted);
	font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------------- ficha */
.tbcs-detail{
	position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end;
	background:color-mix(in srgb, #000 55%, transparent);
	opacity:0;pointer-events:none;transition:opacity .24s var(--tbcs-ease);
}
.tbcs-detail.is-open{opacity:1;pointer-events:auto}
.tbcs-detail__box{
	position:relative;max-height:92%;display:flex;flex-direction:column;
	background:var(--tbcs-bg);border-radius:var(--tbcs-r-lg) var(--tbcs-r-lg) 0 0;
	box-shadow:var(--tbcs-shadow-lg);
	transform:translate3d(0,22px,0);transition:transform .28s var(--tbcs-ease);
}
.tbcs-detail.is-open .tbcs-detail__box{transform:none}
.tbcs-map .tbcs-detail__close{
	--b-bg:color-mix(in srgb, var(--tbcs-bg) 72%, transparent);
	--b-fg:var(--tbcs-text);--b-bg-h:var(--tbcs-surface-2);
	position:absolute;top:12px;right:12px;z-index:3;
	width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
	backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tbcs-detail__scroll{overflow-y:auto;overscroll-behavior:contain;border-radius:inherit}
.tbcs-gal{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tbcs-gal::-webkit-scrollbar{display:none}
.tbcs-gal img{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/10;object-fit:cover;width:100%;display:block;max-width:100%;background:var(--tbcs-surface-2)}
.tbcs-detail__body{padding:18px 18px 24px;display:flex;flex-direction:column;gap:14px}
.tbcs-detail__head{display:flex;align-items:flex-start;gap:13px}
.tbcs-detail__logo{width:52px;height:52px;flex:none;border-radius:var(--tbcs-r-sm);object-fit:contain;background:var(--tbcs-surface);padding:5px}
.tbcs-detail__head h2{font-size:21px;font-weight:700;line-height:1.2}
.tbcs-detail__head p{font-size:13px;color:var(--tbcs-muted);margin-top:5px}
.tbcs-tags{display:flex;flex-wrap:wrap;gap:6px}
.tbcs-tags span,
.tbcs-tags .tbcs-tag{
	display:inline-flex;align-items:center;gap:6px;
	padding:5px 12px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface-2);
	font-size:11.5px;font-weight:700;color:var(--tbcs-accent);
}
.tbcs-tags .tbcs-tag:has(img){padding-left:5px}
.tbcs-map .tbcs-tags img{
	width:20px;height:20px;flex:none;object-fit:contain;border-radius:50%;max-width:none;display:block;
}
.tbcs-card__badge:has(img){padding-left:5px}
.tbcs-map .tbcs-card__badge img{
	width:15px;height:15px;flex:none;object-fit:contain;border-radius:50%;max-width:none;display:block;
}
.tbcs-detail__txt{font-size:14px;color:var(--tbcs-muted);line-height:1.55}
.tbcs-hours{display:flex;flex-direction:column;gap:6px;font-size:13px}
.tbcs-hours div{display:flex;justify-content:space-between;gap:12px;color:var(--tbcs-muted)}
.tbcs-hours b{color:var(--tbcs-text);font-weight:600;font-variant-numeric:tabular-nums}
.tbcs-detail__links{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.tbcs-map .tbcs-detail__links a{color:var(--tbcs-accent);text-decoration:underline;text-underline-offset:3px}
.tbcs-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tbcs-faint)}

/* --------------------------------------------------------- bienvenida */
.tbcs-welcome{
	position:absolute;inset:0;z-index:70;display:grid;place-items:end center;
	background:color-mix(in srgb, #000 55%, transparent);
	padding:0 12px 12px;
}
@media (prefers-reduced-motion:reduce){.tbcs-welcome__box{animation:none !important}}
.tbcs-welcome__box{
	position:relative;
	isolation:isolate;
	transform:translateZ(0);
	width:100%;max-height:84%;overflow-y:auto;overscroll-behavior:contain;
	padding:24px 20px 22px;background:var(--tbcs-bg);
	border-radius:var(--tbcs-r-lg);
	box-shadow:0 0 0 1px color-mix(in srgb, #fff 10%, transparent), 0 18px 50px rgba(0,0,0,.5);
	display:flex;flex-direction:column;gap:15px;
	animation:tbcs-rise .26s var(--tbcs-ease);
}
@keyframes tbcs-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.tbcs-welcome h2{font-size:24px;font-weight:700;line-height:1.18;text-wrap:balance;padding-right:44px}
.tbcs-map .tbcs-welcome__close{
	--b-bg:var(--tbcs-surface);--b-fg:var(--tbcs-text);
	--b-bg-h:var(--tbcs-surface-2);--b-fg-h:var(--tbcs-accent);
	position:absolute;top:12px;right:12px;z-index:3;
	width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;
}
.tbcs-map .tbcs-welcome__close svg{width:17px;height:17px}
.tbcs-pod--inline{
	position:sticky;top:0;z-index:3;
	height:46px;box-shadow:none;background:var(--tbcs-surface);
	backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 16px;
}

.tbcs-welcome p{font-size:14px;color:var(--tbcs-muted)}
/* Índice, no rejilla: las regiones ordenadas de norte a sur y la cantidad
   como barra. Una rejilla de tarjetas con nombre y número es el patrón por
   defecto de cualquier directorio; esto solo funciona para Chile. */
.tbcs-index{display:flex;flex-direction:column}
.tbcs-map .tbcs-index__row{
	--b-bg:transparent;--b-fg:var(--tbcs-text);--b-bg-h:var(--tbcs-surface);
	display:grid;grid-template-columns:minmax(0,1fr) 62px 38px;
	align-items:center;gap:11px;
	padding:11px 12px;border-radius:var(--tbcs-r-sm);
	text-align:left;
}
.tbcs-index__name{
	font-size:15px;font-weight:700;line-height:1.25;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tbcs-index__bar{display:block;height:4px;border-radius:var(--tbcs-pill);background:var(--tbcs-surface-2);overflow:hidden}
.tbcs-index__bar i{
	display:block;height:100%;border-radius:inherit;
	background:color-mix(in srgb, var(--tbcs-accent) 55%, transparent);
	transition:background-color .16s;
}
.tbcs-map .tbcs-index__row:hover .tbcs-index__bar i{background:var(--tbcs-accent)}
.tbcs-index__count{
	font-size:13.5px;font-weight:700;text-align:right;color:var(--tbcs-muted);
	font-variant-numeric:tabular-nums;
}
.tbcs-map .tbcs-index__row.is-on{--b-bg:var(--tbcs-accent);--b-fg:var(--tbcs-primary);--b-bg-h:var(--tbcs-accent);--b-fg-h:var(--tbcs-primary)}
.tbcs-index__row.is-on .tbcs-index__count{color:inherit;opacity:.75}
.tbcs-index__row.is-on .tbcs-index__bar i{background:var(--tbcs-primary)}
.tbcs-map .tbcs-index__row.is-all{
	grid-template-columns:minmax(0,1fr) 42px;
	margin-bottom:4px;padding:14px 12px;
	background:var(--tbcs-surface);
}
.tbcs-map .tbcs-index__row.is-all.is-on{background:var(--tbcs-accent)}
.tbcs-index__row.is-all .tbcs-index__name{font-size:16px}

/* El eje norte–sur: una línea con las dos puntas rotuladas. */
.tbcs-index__axis{
	display:flex;align-items:center;gap:10px;
	padding:12px 12px 6px;
	font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
	color:var(--tbcs-faint);
}
.tbcs-index__axis i{
	flex:1;height:1px;
	background:linear-gradient(to right, var(--tbcs-faint), color-mix(in srgb, var(--tbcs-faint) 20%, transparent));
}
.tbcs-index__axis--end{padding:6px 12px 2px}
.tbcs-index__axis--end i{background:linear-gradient(to left, var(--tbcs-faint), color-mix(in srgb, var(--tbcs-faint) 20%, transparent))}

/* -------------------------------------------------------------- toast */
.tbcs-toast{
	position:absolute;left:50%;bottom:22px;z-index:80;
	transform:translate(-50%,16px);max-width:calc(100% - 32px);
	padding:11px 18px;border-radius:var(--tbcs-pill);
	background:var(--tbcs-accent);color:var(--tbcs-primary);
	font-size:13.5px;font-weight:600;box-shadow:var(--tbcs-shadow);
	opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.tbcs-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------- marcadores */
.tbcs-pin{background:none;border:0}
.tbcs-pin__body{
	position:relative;display:grid;place-items:center;width:38px;height:38px;
	border-radius:50% 50% 50% 0;transform:rotate(-45deg);
	background:var(--tbcs-primary,#211915);
	box-shadow:0 3px 9px rgba(0,0,0,.4);
	transition:transform .16s var(--tbcs-ease);
}
.tbcs-pin__body img{
	width:24px !important;height:24px !important;max-width:none !important;
	margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
	transform:rotate(45deg);object-fit:contain;display:block;pointer-events:none;
}
.tbcs-pin__body span{
	transform:rotate(45deg);font-size:13px;font-weight:700;color:#fff;line-height:1;
}
.tbcs-pin:hover .tbcs-pin__body{transform:rotate(-45deg) scale(1.1)}
.tbcs-pin.is-route .tbcs-pin__body{background:var(--tbcs-accent,#d6d0bd)}
.tbcs-pin.is-route .tbcs-pin__body span{color:var(--tbcs-primary,#211915)}
/* Un grupo es una gota más, con el número dentro y el acento de la marca:
   así el mapa se lee homogéneo en vez de llenarse de globos claros. */
.tbcs-pin--group .tbcs-pin__body{
	background:var(--tbcs-accent,#d6d0bd);
	outline:3px solid color-mix(in srgb, var(--tbcs-accent,#d6d0bd) 28%, transparent);
	outline-offset:0;
}
.tbcs-pin--group .tbcs-pin__body span{color:var(--tbcs-primary,#211915);font-size:14px}
.tbcs-map .leaflet-cluster-anim .leaflet-marker-icon{transition:transform .2s ease-out,opacity .2s ease-in}

.tbcs-stopmark span{
	display:grid;place-items:center;width:24px;height:24px;border-radius:8px;
	background:var(--tbcs-accent,#d6d0bd);color:var(--tbcs-primary,#211915);font-weight:700;font-size:12px;
	box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.tbcs-routeline{stroke:var(--tbcs-accent,#d6d0bd);stroke-width:5;stroke-opacity:.9;fill:none}
.tbcs-routeline--straight{stroke-dasharray:6 10;stroke-width:3;stroke-opacity:.5}
.tbcs-me{fill:var(--tbcs-accent,#d6d0bd);fill-opacity:1;stroke:var(--tbcs-primary,#211915);stroke-width:3}

/* -------------------------------------------------------- escritorio */
@container (min-width:900px){
	.tbcs-top{padding:18px 18px 0;max-width:600px}
	.tbcs-tools{top:18px}

	/* En lista y tarjetas el panel se va al lateral y el mapa sigue visible. */
	.tbcs-map[data-view="list"] .tbcs-sheet,
	.tbcs-map[data-view="cards"] .tbcs-sheet{
		top:0;right:auto;bottom:0;width:600px;height:auto;
		border-radius:0;transform:none;
		box-shadow:14px 0 44px rgba(0,0,0,.4);
	}
	.tbcs-map[data-view="list"] .tbcs-grab,
	.tbcs-map[data-view="cards"] .tbcs-grab{display:none}
	.tbcs-map[data-view="list"] .tbcs-top,
	.tbcs-map[data-view="cards"] .tbcs-top{left:600px;max-width:600px}
	.tbcs-map[data-view="list"] .tbcs-sheet__head,
	.tbcs-map[data-view="cards"] .tbcs-sheet__head{padding-top:18px}
	.tbcs-map[data-view="map"] .tbcs-sheet{max-width:none}
	.tbcs-rail .tbcs-card{flex-basis:186px}
	.tbcs-grid{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}

	.tbcs-detail{place-items:stretch;justify-content:flex-end;padding:0}
	.tbcs-detail__box{width:600px;max-height:100%;height:100%;border-radius:0}
	/* En escritorio no es un popup centrado sino un panel lateral, como el de
	   la lista: el mapa sigue a la vista y el conjunto se lee como una app. */
	.tbcs-welcome{
		display:flex;
		align-items:stretch;
		justify-content:flex-start;
		padding:0;
		background:color-mix(in srgb, #000 38%, transparent);
	}
	.tbcs-welcome__box{
		width:560px;height:100%;max-height:100%;
		border-radius:0;padding:30px 26px 24px;gap:13px;
		animation:tbcs-slide-in .3s var(--tbcs-ease);
		box-shadow:18px 0 50px rgba(0,0,0,.4);
		animation:tbcs-slide-in .3s var(--tbcs-ease);
	}
	@keyframes tbcs-slide-in{from{transform:translateX(-24px);opacity:.4}to{transform:none;opacity:1}}
	.tbcs-welcome h2{font-size:22px}

	/* Dos columnas dentro del panel: las 16 regiones caben sin desplazarse.
	   Multicolumna y no grid, porque fluye hacia abajo y luego salta, que es
	   como se lee de norte a sur; una rejilla lo leería en zigzag. */
	.tbcs-index{display:block;columns:2;column-gap:22px}
	.tbcs-map .tbcs-index__row{
		break-inside:avoid;
		grid-template-columns:minmax(0,1fr) 52px 30px;
		gap:9px;padding:8px 10px;
	}
	.tbcs-index__name{font-size:14px}
	.tbcs-index__count{font-size:12.5px}
	.tbcs-map .tbcs-index__row.is-all,
	.tbcs-index__axis{column-span:all}
	.tbcs-map .tbcs-index__row.is-all{grid-template-columns:minmax(0,1fr) 40px;padding:12px}
	.tbcs-index__axis{padding:8px 10px 4px}
	.tbcs-index__axis--end{padding:4px 10px 0}
}


@container (max-width:560px){
	.tbcs-sheet__head{overflow:visible}
	.tbcs-sheet__meta{position:absolute;top:-50px;right:14px;margin:0}
	.tbcs-count{display:none}
	.tbcs-seg{
		background:color-mix(in srgb, var(--tbcs-float) 92%, transparent);
		backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
		box-shadow:var(--tbcs-shadow-sm);
	}
	.tbcs-map .tbcs-tab{font-size:14.5px;margin-right:10px}
	.tbcs-rail .tbcs-card{flex-basis:168px}
}

@container (max-width:520px){
	.tbcs-pod{height:48px;padding-left:14px}
	.tbcs-map .tbcs-pod__region{max-width:38%;padding:0 11px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
	.tbcs-map *,.tbcs-map *::before,.tbcs-map *::after{
		transition-duration:.01ms !important;
		animation-duration:.01ms !important;
	}
}