/* ===== mapa-simce vanilla: estilos de componente (antes inyectados por Angular) =====
   Replican los bloques styles:[['...']] del bundle, des-angulizados. */

/* ---------- Shell ---------- */
html, body { height: 100%; }
#app { position: relative; height: 100%; }
/* #map crea su propio stacking context (position:relative + z-index:0): los panes
   de Leaflet se posicionan con z-index 200-700 y, si se escapan al contexto raíz,
   se pintarían por encima del sidebar y del rombo #displayFiltro (z-index 1),
   dejando el toggle invisible sobre el mapa. Contenerlos lo devuelve bajo esa UI,
   como en el original (donde el mapa vive en un contexto propio). */
#map { position: relative; z-index: 0; }

/* ---------- Loading (componente .fondo/.load/.loader) ---------- */
.fondo { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; background-color: rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.load { z-index: 9999999 !important; position: absolute !important; right: 15px !important; top: 35px !important; }
.infoLoad { z-index: 9999999 !important; position: absolute !important; right: 15px !important; top: 7px !important; font-size: larger !important; }
.infoLoadBottom { z-index: 9999999 !important; position: absolute !important; right: 5px !important; bottom: 65px !important; font-size: larger !important; }
.loadHeadInfo { z-index: 9999999 !important; position: absolute !important; right: 120px !important; top: 135px !important; }
.centewhite { position: fixed; top: 50%; left: calc(50% - 20px); transform: translate(-50%,-50%); color: rgba(0,105,180,1); }
.loader { border-radius: 50%; border: 2px solid; width: 55px; height: 55px; border-left: 2px solid rgba(0,105,180,.1); border-top: 2px solid rgba(0,105,180,.1); -webkit-animation: 1s linear infinite spin; animation: 1s linear infinite spin; transform: rotate(0); }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ---------- Header (componente header) ---------- */
.navbar-inverse-agua { background-color: #e81328; border-color: transparent; }
.navbar-inverse-agua .navbar-brand { color: #fff; }
.navbar-inverse-agua .navbar-nav > li > a { color: #fff; transition: all ease .2s; }
.navbar-inverse-agua .navbar-nav li a:hover, .navbar-inverse-agua .navbar-nav li.active a:hover { background-color: #f41c64; }
.navbar-inverse-agua .navbar-toggle { border-color: transparent; }
.navbar-inverse-agua .navbar-toggle .icon-bar { background-color: #fff; }
.logoresponsivo { display: none; }
@media only screen and (max-width:700px), screen and (max-height:550px) {
  .logoresponsivo { display: block; height: 14vw; width: 16vw; max-height: 50px; max-width: 60px; background-size: contain; margin-left: 10px; }
}
.nav-search { flex-direction: row; margin-bottom: 0; list-style: none; display: flex; }
.link { text-decoration: unset; color: #fff; line-height: 2.7; font-weight: bolder; opacity: .8; }
.link:hover { opacity: 1; }
@media (max-width:480px) { #headerDin a.link { display: none; } }
.inputBox { width: 400px; height: 33px; margin-top: 0 !important; margin-bottom: 4px; }
@media (min-width: 769px) {
  /* Bootstrap 4 fuerza width:auto en .form-inline .form-control (mayor
     especificidad) y el flex de .nav-search encoge el input: el buscador del
     header se veía ~243px en vez de los 400px del original. Se fija el ancho y
     se impide el shrink; en móvil (≤768 px) sigue rigiendo el max-width:250px. */
  #headerDin .form-inline .form-control.inputBox { flex: 0 0 auto; width: 400px; }
}
#headerDin .form-control { background-clip: unset !important; }
#headerDin .form-control:focus { border-color: transparent !important; }
@media (max-width:768px) {
  .inputBox { width: 400px; height: 33px; margin-top: -5px !important; margin-bottom: 4px; max-width: 250px; margin-right: 10px; }
  .suggestionBox { position: fixed; z-index: 99999; float: right; right: 3px !important; top: 40px; }
  .suggestionUl { width: 399px; top: 51px; left: 551px; max-width: 249px !important; }
}
.suggestionBox { position: fixed; z-index: 99999; right: 8px; top: 40px; max-height: 350px; overflow-y: auto; display: none; }
.suggestionUl { width: 399px; top: 51px; left: 551px; }
/* dropdown alineado bajo el input (left/top/width se fijan por JS al abrir) */
#suggestionBox.suggestionBox { width: auto; }
#suggestionBox .suggestionUl { width: 100%; position: static; top: auto; left: auto; margin: 0; }
.focus-background { background-color: #add8e6; }
/* Piel del dropdown de sugerencias: caja blanca redondeada (paridad con el
   autocomplete del ORIG, que usaba jQuery UI con borde #c5c5c5 y radio 6px).
   Los ítems pierden sus bordes individuales para verse como una lista unida. */
#suggestionBox { background: #fff; border: 1px solid #c5c5c5; border-radius: 6px; }
/* Cada ítem lleva ui-menu-item-wrapper + list-group-item. La regla scoped del
   componente original (.ui-menu-item-wrapper{position:relative;padding:5px;border:none})
   no se portó: sin ella, el padding 0.75rem/1.25rem de Bootstrap list-group-item
   dejaba ítems ~45 px de alto vs ~30 px del original (Ciclo 17, Revisor B). */
#suggestionBox .ui-menu-item-wrapper { position: relative; padding: 5px; border: none; }
#suggestionBox .list-group-item { border-left: 0; border-right: 0; }
#suggestionBox .list-group-item:first-child { border-top: 0; border-radius: 0; }
#suggestionBox .list-group-item:last-child { border-bottom: 0; }
#headerDin::-webkit-scrollbar { width: 7px; }
#headerDin::-webkit-scrollbar-track { background: #00aead; }
#headerDin::-webkit-scrollbar-thumb { background: #029493; }
#headerDin::-webkit-scrollbar-thumb:hover { background: #00aead; }

/* ---------- Sidebar (componente sidebar) ---------- */
.scrollPc { overflow: hidden !important; }
.scrollMobile { overflow: auto !important; }
/* En ventanas de poca altura el sidebar (fijo) queda más corto que su contenido y
   el botón "Filtrar" quedaba inaccesible (el `.scrollPc` anula el scroll). Se
   permite scroll vertical acotando a la altura del viewport. */
@media (max-height: 760px) {
  #filtrosMapa { max-height: 100vh; overflow-y: auto !important; }
}

/* Anclar sidebar y toggle #displayFiltro al tope del viewport (fijo), como en el
   original: el margin-top:50px de #map colapsa a través de #app (sin borde/padding)
   y desplazaría estos absolutos 50px hacia abajo, dejando el rombo semioculto. */
#filtrosMapa, #displayFiltro { position: fixed; }

/* Checkboxes personalizados + logo del componente sidebar (Angular vkb-c4),
   des-angulizados y acotados a #filtrosMapa. Reproduce el original: checkbox
   nativo oculto con cuadrado .checkmark dibujado y logo al 75.99999%. */
#filtrosMapa label.container {
  display: block; position: relative; padding-left: 20px; margin-bottom: 0;
  cursor: pointer; font-size: 13px;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
#filtrosMapa label.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
#filtrosMapa label.container .checkmark { position: absolute; top: 3px; left: 0; height: 12px; width: 12px; background-color: #eee; }
#filtrosMapa label.container:hover input ~ .checkmark { background-color: #ccc; }
#filtrosMapa label.container input:checked ~ .checkmark { background-color: #e81328; }
#filtrosMapa .checkmark:after { content: ""; position: absolute; display: none; }
#filtrosMapa label.container input:checked ~ .checkmark:after { display: block; }
#filtrosMapa label.container .checkmark:after {
  left: 3px; top: 0; width: 5px; height: 10px; border: solid #fff;
  border-width: 0 3px 3px 0; transform: rotate(45deg);
}
#filtrosMapa img { width: 75.99999%; margin-bottom: 5px; }
@media only screen and (max-width: 700px) { #filtrosMapa img { width: 65.99999%; } }
@media only screen and (max-width: 500px) { #filtrosMapa img { width: 55.99999%; margin-bottom: -10px; } }
#filtrosMapa .mg-especial-btm { margin-bottom: 110px; }
#filtrosMapa::-webkit-scrollbar { width: 5px; }
#filtrosMapa::-webkit-scrollbar-track { background: #e81328; }
#filtrosMapa::-webkit-scrollbar-thumb { background: #044d7a; }
#filtrosMapa::-webkit-scrollbar-thumb:hover { background: #e81328; }
#filtrosMapa::-webkit-scrollbar-track:window-inactive { background: #044d7a; }

/* selects nativos del sidebar (reemplazan ng-multiselect-dropdown) */
#filtrosMapa select.lv-select {
  width: 100%; background-color: #044d7a; color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 3px; height: 34px; padding: 4px 8px; font-size: 14px;
}
#filtrosMapa select.lv-select option { background-color: #fff; color: #044d7a; }

/* ---------- Info window / modal (componente info-marker) ---------- */
.lv-infowindow { max-width: 800px; }
.infoPc { max-width: 800px; }
/* El contenido de la ficha scrollea DENTRO del popup (no en el contenedor Leaflet):
   así la punta del popup queda anclada al marcador y el popup cabe en pantallas de
   poca altura aunque el acordeón "Resultados Educativos" se expanda. El tope 765px
   se acota además por la altura del viewport (margen para el header). */
.lv-infowindow .leaflet-popup-content { max-height: min(765px, calc(100vh - 140px)); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 18px; }
.infoMobile { overflow-y: auto !important; overflow: hidden !important; }
/* Icono del enlace "cómo llegar" (antes .goGoogleMap/.mgGoGoogleMap; renombrado al
   pasar el enlace de Google Maps a OpenStreetMap). Mismos valores del original. */
.goMapa { color: #63c2d0; }
.depe, .dire { font-size: 15px; color: #e81328; }
.goMapa:hover { color: #c71527; }
@media (max-width:650px) { .mgGoMapa { margin-left: -5px !important; } }
@media (max-width:380px) { .mgGoMapa { margin-left: 5px !important; } }
.badge-morado { padding: 5px; }
.noSimce { text-align: center; font-weight: 700; }
.btn-forta { color: #00aead; text-decoration: none; box-shadow: none; text-align: left; }
.btn-recom { color: #e81328; text-decoration: none; box-shadow: none; text-align: left; }
.accordion .btn-block:after { font-family: 'Font Awesome 5 Free'; content: "\f146"; float: right; transition: all 1s; font-size: larger; }
.accordion .btn-block.collapsed:after { content: "\f0fe"; transition: all 1s; font-size: larger; }
.parrafo-forta p { text-align: justify; }
.parrafo-forta h5 { color: #00aead; display: list-item; }
.parrafo-recom h5 { color: #f41c64; display: list-item; }
.parrafo-recom p { text-align: justify; }
.multi-collapse li { display: block; }
ol { list-style: none; counter-reset: my-awesome-counter; }
ol li { counter-increment: my-awesome-counter; }
ol li::before { content: counter(my-awesome-counter) "."; color: #e81328; font-weight: 700; list-style-position: inherit !important; font-size: large; margin: -20px; }
.card { border: 0 solid rgba(0,0,0,.125) !important; }
.lv-infowindow img, #infoWindowMarker img, .leaflet-popup-content img { width: 155px; }
.classImg img { width: 100px; }
.modal-title { color: #044d7a; }
.iconflecha { transition: all .5s; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
.iconflechaUp { transform: rotate(180deg); transition: all .5s; }
/* ---- Icono y flecha de las barras del info-window (copiados del original) ----
   El original dibujaba ambos con PNG posicionados en absoluto dentro del botón de
   la barra; su CSS global (styles.*.css) definía `.iconbtn`/`.iconflecha`, pero el
   port conservó sólo los dos `transition`/`filter` de arriba. Se reponen aquí las
   reglas que faltaban (el hueco ya estaba reservado por el `padding` de
   `#acordeonInfoColegio .card-header .btn`), más una clase por icono —el original
   los ponía en un `style="background-image:url(…)"` en línea, que la CSP descarta—.
   Assets: los originales `flecha.<hash>.png`, `icono_categoria_desempeno.png` y
   `icono_resultados_educativos.png` (los dos últimos copiados del espejo `old/`). */
#acordeonInfoColegio .card-header .btn { position: relative; }
.iconbtn { height: 30px; width: 30px; background-position: center; background-size: cover; display: block; position: absolute; top: 10px; left: 10px; }
.iconflecha { height: 30px; width: 30px; background-image: url(../img/flecha.9047b58e17e92ba97d71.png); background-position: center; background-size: cover; display: block; position: absolute; top: 5px; right: 20px; }
.lv-icon-catDes { background-image: url(../img/icono_categoria_desempeno.png); }
.lv-icon-resEdu { background-image: url(../img/icono_resultados_educativos.png); }
.lv-icon-informe { background-image: url(../informe/img/info.png); }
/* La flecha gira al abrir/cerrar. El original lo hacía por JS alternando
   `iconflecha`/`iconflechaUp`; Bootstrap ya mantiene `aria-expanded` en el
   disparador, así que el giro se hace aquí sin JavaScript. */
#acordeonInfoColegio .card-header .btn[aria-expanded="true"] .iconflecha { transform: rotate(180deg); }
#acordeonInfoColegio .card-header .btn:before { border-top: none !important; }
.btn.focus, .btn:focus { outline: 0; box-shadow: 0 0; }
.modal-header { border-bottom: 2px solid #63c2d0 !important; }
/* En el modal móvil el header queda pegado al borde superior y Bootstrap 4 tira
   la X hacia arriba con margin-top:-1rem, recortándola (caja top ≈ -7px). Se
   anula ese margen negativo para que la X quede dentro del header visible. */
#infoWindowModal .modal-header .close { margin-top: 0; }
/* El componente original estilaba .modal-content con esquinas cuadradas
   (border-radius:0); sin esta regla Bootstrap 4 deja el radio por defecto
   (.3rem) y el modal móvil se ve redondeado donde el original era recto. */
#infoWindowModal .modal-content { border-radius: 0; }
.icon-collapsed { font-size: large; }
.img-icon-collpsed-play { width: 35px; }
.img-icon-collpsed-info { width: 30px; }
.modal-footer { border-top: 1px solid #044d7a !important; justify-content: space-between; }
.icon-catDes { height: 28px !important; }
.icon-resuslt { height: 25px !important; width: 21px !important; }
.btn.disabled, .btn:disabled { opacity: 1; }

/* ---------- Categoría de Desempeño (componente categoria) ---------- */
.img-cat { width: 300px; }
.btn-catDes { color: #044d7a; text-decoration: none; box-shadow: none; text-align: left; }
.card-catDes { border: 0 solid rgba(0,0,0,.125) !important; color: #044d7a; }
.card-catDes1 { border: 0 solid rgba(0,0,0,.125) !important; background-color: #e81328; color: #fff; }
.mensaje { font-family: Roboto, sans-serif !important; font-size: 18px; }
.resultados { width: 620px; margin-left: -20px; margin-top: 0; }
@media (max-width:400px) { .resultados { width: 380px; margin-left: 60px; margin-top: -20px; } }
.classImg img { width: 100px; }
.astext { background: 0 0; border: none; margin: 0; padding: 0; cursor: pointer; color: #044d7a; font-weight: 650; }
.astext-header { border-bottom: 2px solid #63c2d0 !important; }
.noCursor { cursor: default; }
.icon-download { width: 30px !important; -webkit-filter: brightness(100) !important; filter: brightness(100) !important; }
.margin-btn { margin-right: 50px; }
.text-btn { font-size: smaller; }
.btn-informe { margin-bottom: 5px; line-height: 15px; margin-top: 5px; }
.icon-collapsed-play, .icon-collapsed-play:hover { opacity: 1; }
.img-icon-collpsed-play { width: 60px; }
div.alert { padding: 0; }
.width-alert { width: 400px; max-width: 400px; }
.width-alert2 { width: 175px; }
@media (max-width:750px) {
  .width-alert, .width-alert2 { width: unset !important; }
  .text-show-long { display: none !important; }
  .text-show-short { display: block !important; }
}
#promo { float: right; display: block; width: 100px; height: unset; line-height: 15px; color: #044d7a; }
#promo2 { float: right; display: block; width: 200px; height: unset; line-height: 15px; color: #044d7a; }
#align-pos { float: left; display: block; width: 195px; height: unset; line-height: 15px; color: #044d7a; margin-right: 10px; }
.btn-info-cat { width: 185px; padding: inherit; letter-spacing: unset !important; }
.text-show-long { display: block; }
.text-show-short { display: none; }
@media (min-width:751px) { .linea { border-right: solid; color: #e81328; height: 50px; } }
.mas-info-cat { background: #0069b4; color: #fff; font-size: inherit; letter-spacing: 0; opacity: .9; }
.mas-info-cat:hover { color: #fff !important; opacity: 1; }
.bold { font-weight: 700 !important; }

/* ---------- Ficha SIMCE / detalle ---------- */
.table-clean .nav-pills .nav-link { background-color: #b8babd; color: #666; }
.table-clean .nav-pills .nav-link:hover { background-color: #ef4b54; }
.tittle-selector { color: rgb(139 147 158); font-weight: 700; }
.text-desc { color: #044d7a; text-align: justify; }
.img-tipo { width: auto; max-width: 70px !important; }
.badge-adecuado { color: #0069b4; background-color: #0069b4; padding: 5px; width: 25px; height: 17px; border: 1px solid #000; }
.badge-elemental { color: #7dc1ea; background-color: #7dc1ea; padding: 5px; width: 25px; height: 17px; border: 1px solid #000; }
.badge-insuficiente { color: #e2f3fe; background-color: #e2f3fe; padding: 5px; width: 25px; height: 17px; border: 1px solid #000; }
.disable-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.selector2 .nav-link { background-color: #ececeb; color: #575757; background-image: unset; width: 195px; height: 65px; line-height: 4; font-weight: 600; }
/* Sub-pestaña activa (SIMCE/Niveles/IDPS): en el original la activa se pinta de rojo
   #e81328 con texto blanco (falta del port: Bootstrap no colorea un .nav sin nav-pills). */
.selector2 .nav-link.active, .selector2 .show > .nav-link { color: #fff; background-color: #e81328; }
.selector2 .nav-link.active:hover { color: #fff; background-color: #ef4b54; }
.selector2 .nav-link2 { line-height: 2 !important; }
.nav-fill .nav-item { flex: unset !important; text-align: center; }
@media (max-width:750px) { .nav-item { margin: 10px 0 0 70px !important; } }
@media (min-width:751px) { .nav-item { margin: 0 !important; } }
@media (max-width:765px) { .lv-infowindow img { width: 350px; } }
@media (max-width:600px) { .lv-infowindow img { width: 300px; margin-left: unset !important; } }
/* La regla genérica `.lv-infowindow img { width: 155px }` (shell) aplasta los
   contenidos grandes de la ficha —banner de Categoría (.resultados) y gráficas
   Simce/Niveles/IDPS— que en el original viven en componentes con ancho propio
   (620px el banner; máx. 480px las gráficas). Se restauran con selectores de mayor
   especificidad. El modal móvil (#infoWindowModal) no tiene envoltorio .lv-infowindow,
   así que sus imágenes se hacen responsive para no desbordar la pantalla. */
#catDesDisplay1 img.resultados { width: 620px; max-width: none; margin-left: -20px; margin-top: 0; }
#resultados8 img:not(.img-tipo) { width: auto; max-width: 480px; height: auto; }
#infoWindowModal img.resultados { width: auto; max-width: 100%; margin-left: 0; margin-top: 0; }
@media (max-width:600px) { #resultados8 img:not(.img-tipo) { max-width: 100%; } }
.conscroll { overflow-y: auto !important; height: 180px !important; }

/* ---------- masInfo (componente mas-info) ---------- */
.nav-masInfoDisplay { border: .1px solid #00000012; }

/* ---------- Controles del mapa ---------- */
.lv-map-controls { position: absolute; right: 10px; bottom: 40px; z-index: 1000; display: flex; flex-direction: column; gap: 6px; }
.lv-map-controls button { background-color: #fff; border: none; outline: 0; width: 28px; height: 28px; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Icono de "Mi ubicación": SVG local propio. Sustituye al sprite de Google Maps del
   bundle original (.posIcon{background-image:url(https://maps.gstatic.com/…/mylocation-
   sprite-1x.png)} de styles.9c398ed5….css), así el sitio no hace peticiones a
   maps.gstatic.com. Esa regla original se conserva sin tocar (styles.css es referencia). */
.lv-map-controls .posIcon { width: 18px; height: 18px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23044d7a" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>'); background-size: contain; background-repeat: no-repeat; }

/* Popup Leaflet con info window */
.leaflet-popup-content-wrapper { border-radius: 4px; }
.leaflet-popup-content { margin: 10px 12px; }
.lv-infowindow-close { float: right; font-size: 18px; cursor: pointer; color: #044d7a; }

/* ---------- Informe de Visita ---------- */
/* Imágenes del Informe: se neutraliza el ancho 155px que el shell .lv-infowindow
   impone, pero SIN !important para no pisar los anchos inline (logo 90px, info
   80px, resultados.svg 100%) ni los de clase (.width-icono 38px, .logo-padres
   110px) que ya tienen mayor especificidad. */
.lv-informe img { width: auto; max-width: 100%; height: auto; }
.lv-informe .fondo-azul { background-color: #003969; color: #fff; }
.lv-informe .titulo-1 { font-weight: 750; color: #fff; margin-top: 10px; font-size: 24px; }
@media (max-width:630px) { .lv-informe .titulo-1 { margin: 15px; font-size: 15px; } }
.lv-informe .logo-padres { width: 110px; float: right; }
.lv-informe .borde-hr { border-bottom: 3px solid #e81328 !important; }
.lv-informe .borde-hr-mobile { border-bottom: 3px solid #e81328 !important; margin-left: 20px; margin-right: 20px; }
.lv-informe .p-list p, .lv-informe .p-list a { color: #fff; }
.lv-informe .p-link { margin-bottom: .5px !important; }
.lv-informe .parrafo-custom { text-align: left; color: #fff; }
.lv-informe .title-resul { text-transform: none; color: #044d7a; font-weight: bolder; }
.lv-informe .rojo { color: #e73339; }
.lv-informe .azul { color: #003a68; }
.lv-informe .width-icono { width: 38px; }
.lv-informe .icon-download { width: 40px !important; }
.lv-informe .icon-brigness-100, .lv-informe .icon-brigness-100 img { -webkit-filter: brightness(100) !important; filter: brightness(100) !important; }
.lv-informe .puntero { cursor: pointer; }
.lv-informe .btn-descarga { background-color: #e81328; border-color: #e81328; color: #fff; opacity: .95; }
.lv-informe .btn-descarga:hover { color: #fff; opacity: 1; }
.lv-informe .fa-ul { margin-left: 1.5em; }
.lv-informe .fa-ul li { display: block; }
.lv-informe .fa-li { color: #e73339; }

/* ---- utilidades usadas por el HTML generado (sin definir en el bundle Angular) ---- */
.font-w-600 { font-weight: 600; }
.w-70 { width: 70%; }

/* ---- Utilidades que sustituyen a los atributos style="…" del HTML generado ----
   Se movieron desde app/map.js, app/fichaSimce.js, app/informe.js, app/search.js y
   index.html a clases para poder servir la página con style-src 'self' (sin
   'unsafe-inline'; ver el <meta Content-Security-Policy> de index.html). Llevan
   !important porque un atributo style tiene la precedencia máxima del autor: así
   replican su efecto exacto (p. ej. .lv-informe img fija width:auto y, sin
   !important, ganaría por especificidad a un width sin él). Los valores dinámicos
   del icono de cluster se aplican por CSSOM desde map.js (no como atributo). */
.lv-ancho-100 { width: 100% !important; }
.lv-ancho-90 { width: 90px !important; }
.lv-ancho-80 { width: 80px !important; }
.lv-ml-10px { margin-left: 10px !important; }
.lv-ml--14px { margin-left: -14px !important; }
.lv-min-h-120 { min-height: 120px !important; }
.lv-pl-0 { padding-left: 0 !important; }
.lv-p-0 { padding: 0 !important; }
.lv-overflow-hidden { overflow: hidden !important; }
.lv-justify-end { justify-content: flex-end !important; }
.lv-helvetica { font-family: Helvetica !important; }
.lv-helvetica-lh-normal { font-family: Helvetica !important; line-height: normal !important; }
.lv-color-0069b4 { color: #0069B4 !important; }
.lv-color-muted-center { color: #6c757d !important; justify-content: center !important; }
.lv-pills-border { border-bottom: 2px solid #b8babd !important; }
.lv-idps-etiqueta { margin-left: -1.1em !important; margin-right: -2.6em !important; }
.lv-icono-ubicacion { font-size: 20px !important; color: #811411 !important; }
.lv-cluster { background-size: contain; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* ---- Indicador de foco visible SOLO para teclado (:focus-visible) ----
   El port borra el outline de Bootstrap en :focus (fidelidad con el original), pero
   un usuario que navega con Tab necesita ver dónde está el foco (WCAG 2.4.7). Con
   :focus-visible el ratón no ve el anillo; solo aparece al navegar con teclado. Va al
   final para ganar la cascada sobre las reglas que ponen outline:0. */
.btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible,
.lv-map-controls button:focus-visible, .leaflet-popup-close-button:focus-visible,
#displayFiltro:focus-visible, #inputText:focus-visible, a:focus-visible {
  outline: 2px solid #044d7a !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}