/*! Bicomunal Cuadrantes de Carabineros | GPL-2.0-or-later */

.bcq {
	--bcq-acento: #16365c;
	--bcq-texto: #1d2733;
	--bcq-suave: #5b6878;
	--bcq-borde: #dfe4ea;
	--bcq-fondo: #f5f7fa;
	--bcq-blanco: #fff;
	--bcq-rojo: #b3261e;
	--bcq-radio: 14px;
	container-type: inline-size;
	color: var(--bcq-texto);
	font-size: 1rem;
	line-height: 1.5;
	margin: 1.5em 0;
	max-width: 100%;
}

.bcq *,
.bcq *::before,
.bcq *::after { box-sizing: border-box; }

.bcq [hidden] { display: none !important; }
.bcq p { margin: 0 0 .5em; }
.bcq a { color: var(--bcq-acento); }

.bcq-icono { display: inline-block; flex: none; vertical-align: -.25em; }

/* Cabecera */
.bcq-cab {
	background: linear-gradient(135deg, var(--bcq-acento), color-mix(in srgb, var(--bcq-acento) 70%, #0a7f6f));
	border-radius: var(--bcq-radio) var(--bcq-radio) 0 0;
	color: #fff;
	padding: 1.25rem 1.25rem 1.1rem;
}
.bcq-antetitulo {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	opacity: .85;
	text-transform: uppercase;
}
.bcq .bcq-titulo {
	color: #fff;
	font-size: clamp(1.35rem, 5cqi, 1.9rem);
	line-height: 1.15;
	margin: .1em 0 .35em;
}
.bcq-bajada { font-size: 1rem; margin: 0; opacity: .95; }

.bcq-urgencia {
	align-items: center;
	background: #fdecea;
	border: 1px solid #f5c2bd;
	border-top: 0;
	color: #7a1c15;
	display: flex;
	gap: .5rem;
	margin: 0 0 1rem !important;
	padding: .6rem 1.25rem;
}
.bcq-urgencia .bcq-icono { color: var(--bcq-rojo); }
.bcq-urgencia a { color: var(--bcq-rojo); font-size: 1.15em; text-decoration: none; }

/* Acciones */
.bcq-acciones { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); margin: 0 0 1rem; }
.bcq-boton {
	align-items: center;
	background: var(--bcq-acento);
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	gap: .5rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: .75rem 1.3rem;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bcq-boton:hover { box-shadow: 0 6px 18px rgb(0 0 0 / 16%); transform: translateY(-1px); }
.bcq-boton:focus-visible,
.bcq-accion:focus-visible,
.bcq-opcion:focus-visible,
.bcq-input:focus-visible,
.bcq-mapa-ctl button:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.bcq-boton:disabled { cursor: progress; opacity: .75; }
.bcq-boton--gps { font-size: 1.08rem; justify-self: start; min-height: 54px; padding-inline: 1.6rem; }
.bcq-boton--gps.es-buscando .bcq-icono { animation: bcq-latido 1s ease-in-out infinite; }
.bcq-boton--seguir {
	background: var(--bcq-blanco);
	border: 2px solid var(--bcq-acento);
	color: var(--bcq-acento);
	font-size: .95rem;
	justify-self: start;
	min-height: 44px;
}
.bcq-boton--seguir[aria-pressed="true"] { background: #e8f6f1; border-color: #0a7f6f; color: #075c50; }
.bcq-seguir-luz { background: #9aa5b1; border-radius: 50%; height: .7rem; width: .7rem; }
.bcq-boton--seguir[aria-pressed="true"] .bcq-seguir-luz { animation: bcq-latido 1.4s ease-in-out infinite; background: #0a9f86; }
.bcq-boton--sec { background: var(--bcq-blanco); border: 2px solid var(--bcq-acento); color: var(--bcq-acento); }

@keyframes bcq-latido { 50% { opacity: .35; transform: scale(.85); } }

.bcq-buscador { min-width: 0; position: relative; }
.bcq-etiqueta { display: block; font-weight: 600; margin-bottom: .35rem; }
.bcq-campo { display: flex; gap: .5rem; }
.bcq-input {
	background: var(--bcq-blanco);
	border: 2px solid var(--bcq-borde);
	border-radius: 12px;
	color: var(--bcq-texto);
	flex: 1 1 8rem;
	font: inherit;
	font-size: 1.05rem;
	width: auto;
	min-height: 48px;
	min-width: 0;
	padding: .6rem .9rem;
}
.bcq-input:focus { border-color: var(--bcq-acento); }
.bcq-sugerencias {
	background: var(--bcq-blanco);
	border: 1px solid var(--bcq-borde);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgb(0 0 0 / 14%);
	left: 0;
	list-style: none;
	margin: .3rem 0 0;
	max-height: 320px;
	overflow-y: auto;
	padding: .3rem;
	position: absolute;
	right: 0;
	z-index: 30;
}
.bcq-sugerencias li {
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	gap: .75rem;
	justify-content: space-between;
	padding: .55rem .7rem;
}
.bcq-sugerencias li small { color: var(--bcq-suave); flex: none; }
.bcq-sugerencias li:hover,
.bcq-sugerencias li[aria-selected="true"] { background: #eaf0f7; }

/* Estado */
.bcq-estado:empty { display: none; }
.bcq-estado {
	border-left: 4px solid var(--bcq-acento);
	background: var(--bcq-fondo);
	border-radius: 6px;
	margin: 0 0 1rem;
	padding: .55rem .8rem;
}
.bcq-estado--error { border-color: var(--bcq-rojo); background: #fdf1f0; }
.bcq-estado--ok { border-color: #0a7f6f; }
.bcq-estado--oculto {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.bcq-estado--espera { border-color: #c9a227; }

/* Resultado */
.bcq-resultado:focus { outline: none; }
.bcq-res {
	--bcq-c: var(--bcq-acento);
	animation: bcq-entra .35s ease;
	background: var(--bcq-blanco);
	border: 2px solid var(--bcq-c);
	border-radius: var(--bcq-radio);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--bcq-c) 20%, transparent);
	margin: 0 0 1.25rem;
	overflow: hidden;
	padding: 1.1rem 1.2rem 1rem;
	position: relative;
}
.bcq-res::before {
	background: var(--bcq-c);
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
@keyframes bcq-entra { from { opacity: 0; transform: translateY(8px); } }
.bcq-res-ante { color: var(--bcq-suave); margin-top: .2rem !important; }
.bcq-res-num {
	align-items: center;
	display: flex;
	font-size: clamp(1.6rem, 7cqi, 2.3rem);
	font-weight: 800;
	gap: .7rem;
	line-height: 1.1;
}
.bcq-res-chip,
.bcq-chip {
	align-items: center;
	background: var(--bcq-c, var(--bcq-acento));
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: none;
	font-weight: 800;
	justify-content: center;
}
.bcq-res-chip { font-size: .8em; height: 2em; width: 2em; }
.bcq-chip { font-size: .85rem; height: 1.9rem; width: 1.9rem; }
.bcq-res-nombre { font-size: 1.12rem; font-weight: 600; }
.bcq-res-num > span:last-child { display: flex; flex-direction: column; }
.bcq-res-comuna { color: var(--bcq-suave); font-size: .45em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bcq-comuna + .bcq-comuna { border-top: 1px solid var(--bcq-borde); margin-top: 1.25rem; }
.bcq .bcq-subtitulo small { color: var(--bcq-suave); font-size: .75em; font-weight: 500; margin-left: .35em; }
.bcq-unidades { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0 0 1rem; }
.bcq-unidades .bcq-unidad { margin: 0; }
.bcq-unidad-detalle { color: var(--bcq-suave); font-size: .85rem; }
.bcq-llamar {
	align-items: center;
	background: #0a7f6f;
	border-radius: 14px;
	color: #fff !important;
	display: flex;
	gap: .8rem;
	margin: .8rem 0;
	padding: .85rem 1.1rem;
	text-decoration: none;
	transition: background .15s ease;
}
.bcq-llamar:hover { background: #086b5d; }
.bcq-llamar .bcq-icono { height: 28px; width: 28px; }
.bcq-llamar span { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; }
.bcq-llamar strong { font-size: 1.35rem; letter-spacing: .02em; }
.bcq-res-aviso {
	background: #fff7e0;
	border-radius: 8px;
	font-size: .95rem;
	padding: .55rem .75rem;
}
.bcq-res--cercano { border-style: dashed; }
.bcq-res--fuera { --bcq-c: #8a94a0; }
.bcq-res-fuera { font-size: 1.15rem; font-weight: 700; }
.bcq-res-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .9rem; }
.bcq-accion {
	align-items: center;
	background: var(--bcq-fondo);
	border: 1px solid var(--bcq-borde);
	border-radius: 999px;
	color: var(--bcq-texto);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .92rem;
	gap: .4rem;
	min-height: 40px;
	padding: .4rem .9rem;
}
.bcq-accion:hover { border-color: var(--bcq-acento); }
.bcq-res-unidad {
	border-top: 1px solid var(--bcq-borde);
	display: flex;
	gap: .7rem;
	padding-top: .8rem;
}
.bcq-res-unidad > .bcq-icono { color: var(--bcq-acento); height: 26px; width: 26px; }
.bcq-res-unidad p { margin: 0 0 .2rem; }
.bcq-res-mas { margin-top: .6rem; }
.bcq-res-mas summary { color: var(--bcq-acento); cursor: pointer; font-weight: 600; }
.bcq-res-mas p { margin: .4rem 0 0; }
.bcq-enlace { align-items: center; display: inline-flex; font-weight: 600; gap: .3rem; }

/* Opciones (calle con varios cuadrantes, resultados en línea) */
.bcq-opciones {
	background: var(--bcq-fondo);
	border-radius: var(--bcq-radio);
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
}
.bcq-opciones-grupo { border-left: 4px solid var(--bcq-c); margin: .8rem 0; padding-left: .8rem; }
.bcq-opciones-q { align-items: center; display: flex; font-weight: 700; gap: .5rem; }
.bcq-opciones-l { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.bcq-opcion {
	align-items: center;
	background: var(--bcq-blanco);
	border: 1px solid var(--bcq-borde);
	border-radius: 10px;
	color: var(--bcq-texto);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: .55rem;
	min-height: 44px;
	padding: .45rem .8rem;
	text-align: left;
}
.bcq-opcion:hover { border-color: var(--bcq-acento); }
.bcq-opcion--chica { font-size: .92rem; min-height: 38px; }

/* Mapa */
.bcq-mapa {
	background: #eef2f6;
	border: 1px solid var(--bcq-borde);
	border-radius: var(--bcq-radio);
	margin: 0 0 1.25rem;
	overflow: hidden;
	padding: 0;
}
.bcq-mapa-lienzo { position: relative; }
.bcq-svg {
	--bcq-z: 1;
	background: #eef2f6;
	cursor: crosshair;
	display: block;
	height: auto;
	touch-action: pan-y;
	user-select: none;
	width: 100%;
}
.bcq-svg-fondo { fill: #eef2f6; }
.bcq-svg-comuna { fill: #f8f9fb; stroke: #9aa5b1; stroke-dasharray: calc(6px * var(--bcq-z)) calc(4px * var(--bcq-z)); stroke-width: calc(1.5px * var(--bcq-z)); }
.bcq-svg-zona {
	fill: var(--bcq-c);
	fill-opacity: .2;
	stroke: var(--bcq-c);
	stroke-linejoin: round;
	stroke-width: calc(2.5px * var(--bcq-z));
	transition: fill-opacity .25s ease;
}
.bcq-svg-zona.es-activa { fill-opacity: .42; stroke-width: calc(4px * var(--bcq-z)); }
.bcq-svg-zona.es-tenue { fill-opacity: .08; }
.bcq-svg-via { fill: none; stroke: #b9c2cc; stroke-linecap: round; stroke-linejoin: round; stroke-width: calc(1.4px * var(--bcq-z)); }
.bcq-svg-via--0 { stroke: #e2a03f; stroke-width: calc(4px * var(--bcq-z)); }
.bcq-svg-via--1 { stroke: #8d99a6; stroke-width: calc(2.6px * var(--bcq-z)); }
.bcq-svg-via--2 { stroke: #a3aeb9; stroke-width: calc(2px * var(--bcq-z)); }
.bcq-svg-tren-base { fill: none; stroke: #4a5560; stroke-width: calc(3px * var(--bcq-z)); }
.bcq-svg-tren { fill: none; stroke: #fff; stroke-dasharray: calc(6px * var(--bcq-z)) calc(6px * var(--bcq-z)); stroke-width: calc(1.6px * var(--bcq-z)); }
.bcq-svg-calle {
	fill: #36414c;
	font: 600 calc(13px * var(--bcq-z)) / 1 system-ui, sans-serif;
	paint-order: stroke;
	pointer-events: none;
	stroke: #fff;
	stroke-width: calc(3px * var(--bcq-z));
}
.bcq-svg-chip { pointer-events: none; }
.bcq-svg-chip circle { fill: var(--bcq-c); stroke: #fff; stroke-width: 3; transform: scale(var(--bcq-z)); }
.bcq-svg-chip text { fill: #fff; font: 800 20px / 1 system-ui, sans-serif; transform: scale(var(--bcq-z)); }
.bcq-svg-chip.es-activa circle { stroke: #1d2733; stroke-width: 4; }
.bcq-svg-unidad path { fill: var(--bcq-acento); stroke: #fff; stroke-width: 2.5; }
.bcq-svg-unidad path,
.bcq-svg-unidad text { transform: scale(calc(var(--bcq-z) * 1.4)); }
.bcq-svg-unidad text { fill: #fff; font: 800 9px / 1 system-ui, sans-serif; pointer-events: none; }
.bcq-svg-yo { pointer-events: none; }
.bcq-svg-yo-radio { fill: #1a73e8; fill-opacity: .12; stroke: #1a73e8; stroke-opacity: .5; stroke-width: calc(1.5px * var(--bcq-z)); }
.bcq-svg-yo-punto { fill: #1a73e8; stroke: #fff; stroke-width: 3; transform: scale(var(--bcq-z)); }
.bcq-svg-yo-pulso { animation: bcq-pulso 2s ease-out infinite; fill: #1a73e8; opacity: .35; transform-box: fill-box; transform-origin: center; }
@keyframes bcq-pulso { from { transform: scale(calc(var(--bcq-z) * .8)); opacity: .5; } to { transform: scale(calc(var(--bcq-z) * 2.6)); opacity: 0; } }

.bcq-mapa-ctl { display: flex; flex-direction: column; gap: 6px; position: absolute; right: 10px; top: 10px; }
.bcq-mapa-ctl button {
	background: #fff;
	border: 1px solid var(--bcq-borde);
	border-radius: 8px;
	box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
	color: var(--bcq-texto);
	cursor: pointer;
	font: 700 20px / 1 system-ui, sans-serif;
	height: 40px;
	width: 40px;
}
.bcq-mapa-pie { color: var(--bcq-suave); font-size: .85rem; padding: .45rem .8rem; }

/* Lista de cuadrantes */
.bcq .bcq-subtitulo { font-size: 1.2rem; margin: 1.5rem 0 .8rem; }
.bcq-tarjetas {
	display: grid;
	gap: .8rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.bcq-tarjeta {
	--bcq-c: var(--bcq-acento);
	background: var(--bcq-blanco);
	border: 1px solid var(--bcq-borde);
	border-radius: 12px;
	border-top: 5px solid var(--bcq-c);
	padding: .8rem .9rem;
	transition: box-shadow .2s ease, transform .2s ease;
}
.bcq-tarjeta.es-activa { box-shadow: 0 0 0 3px var(--bcq-c); }
.bcq-tarjeta p { margin: 0 0 .3rem; }
.bcq-tarjeta-num { align-items: center; display: flex; font-weight: 800; gap: .5rem; }
.bcq-tarjeta-num .bcq-chip { --bcq-c: inherit; background: var(--bcq-c); }
.bcq-tarjeta-nombre { font-weight: 600; }
.bcq-tarjeta-tel a { align-items: center; display: inline-flex; font-size: 1.1rem; font-weight: 700; gap: .35rem; text-decoration: none; }
.bcq-tarjeta-lugares,
.bcq-tarjeta-limites,
.bcq-tarjeta-unidad { color: var(--bcq-suave); font-size: .88rem; }
.bcq-tarjeta-limites span { font-weight: 600; }

.bcq-unidad {
	background: var(--bcq-fondo);
	border-radius: 12px;
	margin: 0 0 1rem;
	padding: .9rem 1rem;
}
.bcq-unidad p { margin: 0 0 .25rem; }
.bcq-unidad-nombre { align-items: center; display: flex; gap: .45rem; }
.bcq-unidad-nombre .bcq-icono { color: var(--bcq-acento); }

/* Teléfonos de emergencia */
.bcq-numeros {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.bcq-numero {
	align-items: center;
	background: var(--bcq-blanco);
	border: 1px solid var(--bcq-borde);
	border-radius: 12px;
	color: var(--bcq-texto) !important;
	display: flex;
	gap: .7rem;
	height: 100%;
	padding: .55rem .7rem;
	text-decoration: none;
}
.bcq-numero:hover { border-color: var(--bcq-acento); }
.bcq-numero-n {
	background: var(--bcq-acento);
	border-radius: 10px;
	color: #fff;
	flex: none;
	font-size: 1.05rem;
	font-weight: 800;
	min-width: 3.6rem;
	padding: .35rem .4rem;
	text-align: center;
}
.bcq-numeros li:first-child .bcq-numero-n { background: var(--bcq-rojo); }
.bcq-numero-t { display: flex; flex-direction: column; line-height: 1.25; }
.bcq-numero-t small { color: var(--bcq-suave); font-size: .8rem; }

.bcq-nota { color: var(--bcq-suave); font-size: .85rem; }
.bcq-aviso { background: #fff7e0; border-radius: 8px; color: var(--bcq-texto); padding: .5rem .7rem; }
.bcq-creditos { font-size: .78rem; }

/* Franja compacta */
.bcq--compacta {
	background: var(--bcq-blanco);
	border: 1px solid var(--bcq-borde);
	border-radius: var(--bcq-radio);
	overflow: hidden;
}
.bcq--compacta .bcq-cab { border-radius: 0; padding: 1rem 1.1rem .9rem; }
.bcq--compacta .bcq-titulo { font-size: 1.3rem; }
.bcq--compacta .bcq-bajada { font-size: .92rem; }
.bcq--compacta .bcq-urgencia { border-left: 0; border-right: 0; padding-inline: 1.1rem; }
.bcq--compacta .bcq-acciones,
.bcq--compacta .bcq-estado,
.bcq--compacta .bcq-resultado,
.bcq--compacta .bcq-nota { margin-inline: 1.1rem; }
.bcq--compacta .bcq-res { box-shadow: none; }
.bcq--compacta .bcq-acciones { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Sin JavaScript, la lista hace todo el trabajo. */
.bcq:not(.bcq--listo) .bcq-mapa { display: none; }

@container (min-width: 640px) {
	.bcq-acciones { align-items: end; grid-template-columns: auto minmax(0, 1fr); }
	.bcq-boton--seguir { grid-column: 1; grid-row: 2; }
	.bcq-buscador { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
	.bcq *,
	.bcq *::before { animation: none !important; transition: none !important; }
}

@media print {
	.bcq-acciones,
	.bcq-mapa-ctl,
	.bcq-res-acciones,
	.bcq-estado { display: none !important; }
	.bcq-cab { background: none; border-bottom: 3px solid #000; color: #000; }
	.bcq .bcq-titulo { color: #000; }
}