/*!
 * bootstrap5-compat.css
 * Capa de compatibilidad para la migracion Bootstrap 4.2.1 -> 5.3.3
 *
 * Reintroduce utilidades y clases que Bootstrap 5 elimino o renombro,
 * para garantizar que ningun elemento del tema (o contenido cargado desde
 * la base de datos / plugins) pierda su estetica si quedara alguna clase
 * antigua sin migrar en el markup.
 *
 * Escala de espaciado BS4: 0=0 | 1=.25rem | 2=.5rem | 3=1rem | 4=1.5rem | 5=3rem
 * Breakpoints BS5: sm>=576 | md>=768 | lg>=992 | xl>=1200 | xxl>=1400
 *
 * Debe cargarse DESPUES de bootstrap.min.css.
 */

/* ============================================================
   1. Margenes / paddings direccionales (ml/mr/pl/pr -> ms/me/ps/pe)
   ============================================================ */
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Responsive: ml/mr/pl/pr por breakpoint */
@media (min-width: 576px) {
  .ml-sm-0{margin-left:0!important}.ml-sm-1{margin-left:.25rem!important}.ml-sm-2{margin-left:.5rem!important}.ml-sm-3{margin-left:1rem!important}.ml-sm-4{margin-left:1.5rem!important}.ml-sm-5{margin-left:3rem!important}.ml-sm-auto{margin-left:auto!important}
  .mr-sm-0{margin-right:0!important}.mr-sm-1{margin-right:.25rem!important}.mr-sm-2{margin-right:.5rem!important}.mr-sm-3{margin-right:1rem!important}.mr-sm-4{margin-right:1.5rem!important}.mr-sm-5{margin-right:3rem!important}.mr-sm-auto{margin-right:auto!important}
  .pl-sm-0{padding-left:0!important}.pl-sm-1{padding-left:.25rem!important}.pl-sm-2{padding-left:.5rem!important}.pl-sm-3{padding-left:1rem!important}.pl-sm-4{padding-left:1.5rem!important}.pl-sm-5{padding-left:3rem!important}
  .pr-sm-0{padding-right:0!important}.pr-sm-1{padding-right:.25rem!important}.pr-sm-2{padding-right:.5rem!important}.pr-sm-3{padding-right:1rem!important}.pr-sm-4{padding-right:1.5rem!important}.pr-sm-5{padding-right:3rem!important}
}
@media (min-width: 768px) {
  .ml-md-0{margin-left:0!important}.ml-md-1{margin-left:.25rem!important}.ml-md-2{margin-left:.5rem!important}.ml-md-3{margin-left:1rem!important}.ml-md-4{margin-left:1.5rem!important}.ml-md-5{margin-left:3rem!important}.ml-md-auto{margin-left:auto!important}
  .mr-md-0{margin-right:0!important}.mr-md-1{margin-right:.25rem!important}.mr-md-2{margin-right:.5rem!important}.mr-md-3{margin-right:1rem!important}.mr-md-4{margin-right:1.5rem!important}.mr-md-5{margin-right:3rem!important}.mr-md-auto{margin-right:auto!important}
  .pl-md-0{padding-left:0!important}.pl-md-1{padding-left:.25rem!important}.pl-md-2{padding-left:.5rem!important}.pl-md-3{padding-left:1rem!important}.pl-md-4{padding-left:1.5rem!important}.pl-md-5{padding-left:3rem!important}
  .pr-md-0{padding-right:0!important}.pr-md-1{padding-right:.25rem!important}.pr-md-2{padding-right:.5rem!important}.pr-md-3{padding-right:1rem!important}.pr-md-4{padding-right:1.5rem!important}.pr-md-5{padding-right:3rem!important}
}
@media (min-width: 992px) {
  .ml-lg-0{margin-left:0!important}.ml-lg-1{margin-left:.25rem!important}.ml-lg-2{margin-left:.5rem!important}.ml-lg-3{margin-left:1rem!important}.ml-lg-4{margin-left:1.5rem!important}.ml-lg-5{margin-left:3rem!important}.ml-lg-auto{margin-left:auto!important}
  .mr-lg-0{margin-right:0!important}.mr-lg-1{margin-right:.25rem!important}.mr-lg-2{margin-right:.5rem!important}.mr-lg-3{margin-right:1rem!important}.mr-lg-4{margin-right:1.5rem!important}.mr-lg-5{margin-right:3rem!important}.mr-lg-auto{margin-right:auto!important}
  .pl-lg-0{padding-left:0!important}.pl-lg-1{padding-left:.25rem!important}.pl-lg-2{padding-left:.5rem!important}.pl-lg-3{padding-left:1rem!important}.pl-lg-4{padding-left:1.5rem!important}.pl-lg-5{padding-left:3rem!important}
  .pr-lg-0{padding-right:0!important}.pr-lg-1{padding-right:.25rem!important}.pr-lg-2{padding-right:.5rem!important}.pr-lg-3{padding-right:1rem!important}.pr-lg-4{padding-right:1.5rem!important}.pr-lg-5{padding-right:3rem!important}
}
@media (min-width: 1200px) {
  .ml-xl-0{margin-left:0!important}.ml-xl-1{margin-left:.25rem!important}.ml-xl-2{margin-left:.5rem!important}.ml-xl-3{margin-left:1rem!important}.ml-xl-4{margin-left:1.5rem!important}.ml-xl-5{margin-left:3rem!important}.ml-xl-auto{margin-left:auto!important}
  .mr-xl-0{margin-right:0!important}.mr-xl-1{margin-right:.25rem!important}.mr-xl-2{margin-right:.5rem!important}.mr-xl-3{margin-right:1rem!important}.mr-xl-4{margin-right:1.5rem!important}.mr-xl-5{margin-right:3rem!important}.mr-xl-auto{margin-right:auto!important}
  .pl-xl-0{padding-left:0!important}.pl-xl-1{padding-left:.25rem!important}.pl-xl-2{padding-left:.5rem!important}.pl-xl-3{padding-left:1rem!important}.pl-xl-4{padding-left:1.5rem!important}.pl-xl-5{padding-left:3rem!important}
  .pr-xl-0{padding-right:0!important}.pr-xl-1{padding-right:.25rem!important}.pr-xl-2{padding-right:.5rem!important}.pr-xl-3{padding-right:1rem!important}.pr-xl-4{padding-right:1.5rem!important}.pr-xl-5{padding-right:3rem!important}
}

/* ============================================================
   2. Alineacion de texto (text-left/right -> text-start/end)
   ============================================================ */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
@media (min-width: 576px) { .text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important} }
@media (min-width: 768px) { .text-md-left{text-align:left!important}.text-md-right{text-align:right!important} }
@media (min-width: 992px) { .text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important} }
@media (min-width: 1200px){ .text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important} }

/* ============================================================
   3. Floats (float-left/right -> float-start/end)
   ============================================================ */
.float-left { float: left !important; }
.float-right { float: right !important; }
@media (min-width: 576px) { .float-sm-left{float:left!important}.float-sm-right{float:right!important} }
@media (min-width: 768px) { .float-md-left{float:left!important}.float-md-right{float:right!important} }
@media (min-width: 992px) { .float-lg-left{float:left!important}.float-lg-right{float:right!important} }
@media (min-width: 1200px){ .float-xl-left{float:left!important}.float-xl-right{float:right!important} }

/* ============================================================
   4. Grid sin gutters (no-gutters -> g-0)
   ============================================================ */
.no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.no-gutters > * { padding-right: 0; padding-left: 0; }

/* ============================================================
   5. Accesibilidad (sr-only -> visually-hidden)
   ============================================================ */
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   6. Tipografia (font-weight-* -> fw-*, font-italic -> fst-italic)
   ============================================================ */
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-italic { font-style: italic !important; }

/* ============================================================
   7. Botones a ancho completo (btn-block)
   ============================================================ */
.btn-block { display: block !important; width: 100% !important; }
.btn-block + .btn-block { margin-top: .5rem; }

/* ============================================================
   8. Grupo de formulario (form-group)
   ============================================================ */
.form-group { margin-bottom: 1rem; }

/* ============================================================
   9. Embed responsive (embed-responsive -> ratio) usado por el lightbox de video
   ============================================================ */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.embed-responsive::before {
  display: block;
  content: "";
}
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before  { padding-top: 75%; }
.embed-responsive-1by1::before  { padding-top: 100%; }
.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   10. Boton de cierre BS4 (.close) usado en alertas de formHandler.js
   ============================================================ */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  padding: 0;
  background-color: transparent;
  border: 0;
}
.close:hover { color: #000; text-decoration: none; }
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus { opacity: .75; }

/* ============================================================
   11. Comportamiento de ".row" estilo BS4 (tema export de Blocs)
   BS5 introdujo la regla ".row > * { width:100%; padding; margin-top }"
   que NO existia en BS4. El tema usa ".row" como contenedor flex generico
   con hijos que NO son columnas (navbars, cabeceras de seccion icono+titulo,
   wrappers, etc.). Esa regla estiraba esos hijos a todo el ancho, rompiendo:
     - el navbar (toggler a ancho completo / icono fuera de pantalla, menu descentrado)
     - las cabeceras de seccion (icono y titulo separados a los extremos)
   Restauramos el dimensionado natural de BS4 SOLO para hijos que no sean
   columnas (.col / .col-*). Las columnas conservan su comportamiento BS5.
   ============================================================ */
.row > *:not([class~="col"]):not([class*="col-"]) {
  width: auto;
  max-width: none;
  margin-top: 0;
  padding-right: 0;
  padding-left: 0;
}
/* El contenedor colapsable del navbar debe ocupar todo el ancho al expandirse */
.navbar.row > .navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
}

/* ============================================================
   12. Personalizaciones que estaban embebidas dentro del bootstrap.css de
   BS4 (editado in-place por el equipo) y que se perdieron al migrar al
   bootstrap.min.css 5.3.3 puro. Se restauran aqui para conservar la estetica.
   ============================================================ */
/* Tarjetas de avisos/noticias con fondo oscuro (antes #2a303b dentro de BS4) */
.card {
  background-color: #2a303b;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
/* Menus desplegables del navbar con fondo oscuro (antes #303845 dentro de BS4) */
.dropdown-menu {
  background-color: #303845;
  padding: 0.5rem 7px;
}
.navbar-expand-md .navbar-nav .dropdown-menu {
  padding-right: 0 !important;
}
/* Espaciado de items del menu (JSMA) */
.menu-item {
  padding-bottom: 7px;
  margin: 0 auto !important;
  padding-right: 8px;
}
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 7px;
  }
}