/*
 * Capa de compatibilidad Bootstrap 4 -> Bootstrap 5
 * ---------------------------------------------------
 * Re-agrega utilidades y componentes que Bootstrap 5 renombró o eliminó,
 * para que el tema "Angle" (nativo de BS4) y las plantillas existentes sigan
 * funcionando sin reescribir cientos de clases. Se carga DESPUÉS de Bootstrap 5.
 */

/* ---- Enlaces (BS5 subraya los <a> por defecto; BS4 no) ---- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* En navegación/menús/botones nunca queremos subrayado */
.navbar a, .sidebar-nav a, .nav-link, .dropdown-item,
.navbar a:hover, .sidebar-nav a:hover, .nav-link:hover, .dropdown-item:hover,
.page-link, .btn, .list-inline a { text-decoration: none; }

/* ---- Utilidades de margen/padding (BS5 renombró l/r -> s/e) ---- */
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.mr-1 { margin-right: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.mr-2 { margin-right: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-3 { margin-right: 1rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }

/* ---- Columnas -xs- (BS3, eliminadas en BS4+; -xs = sin breakpoint) ---- */
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }

/* ---- Floats y alineación de texto (BS5 renombró a start/end) ---- */
.float-left, .pull-left { float: left !important; }
.float-right, .pull-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* ---- Botón de cierre estilo BS4 (.close) ---- */
button.close, .close {
  padding: 0;
  background-color: transparent;
  border: 0;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  cursor: pointer;
}
button.close:hover, .close:hover { opacity: .75; }
/* En BS5 el .modal-header es flex, por lo que float:right no empuja la X.
   margin-left:auto la manda a la derecha dentro del flex. */
.modal-header .close { margin-left: auto; }

/* ---- Botones por defecto (BS5 quitó btn-default) ---- */
.btn-default {
  color: #212529;
  background-color: #e9ecef;
  border-color: #ced4da;
}
.btn-default:hover { background-color: #dde1e5; border-color: #b9c1c9; }

/* btn-info: el tema usa un azul oscuro, pero BS5 pone el texto en negro.
   Forzamos el contenido (texto e íconos) en blanco para tener contraste. */
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info:disabled,
.btn-info.disabled { color: #fff; }

/* ---- Grupos de formulario e inline (BS5 los eliminó) ---- */
.form-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-flow: row wrap; align-items: center; }
.form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
.control-label { margin-bottom: .5rem; }

/* ---- Input groups (BS5 quitó append/prepend) ---- */
.input-group-append, .input-group-prepend { display: flex; }
.input-group-append { margin-left: -1px; }
.input-group-prepend { margin-right: -1px; }
.input-group-append .input-group-text,
.input-group-prepend .input-group-text { height: 100%; }

/* ---- Badges de color (BS5 usa text-bg-*) ---- */
.badge-primary { color: #fff; background-color: #0d6efd; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #198754; }
.badge-danger  { color: #fff; background-color: #dc3545; }
.badge-warning { color: #212529; background-color: #ffc107; }
.badge-info    { color: #fff; background-color: #0dcaf0; }
.badge-light   { color: #212529; background-color: #f8f9fa; }
.badge-dark    { color: #fff; background-color: #212529; }

/* ---- Tabla condensada (BS3) -> equivalente a table-sm ---- */
.table-condensed > :not(caption) > * > * { padding: .25rem; }

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

/* ---- help-block (BS3) -> equivalente a form-text ---- */
.help-block { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }
.help-block.with-errors { color: #dc3545; }

/* ---- Estados de validación BS3 usados por JS de autocomplete ---- */
.has-error .form-control { border-color: #dc3545; }
.has-success .form-control { border-color: #198754; }

/* ---- Barra de progreso rayada/animada (compat con markup BS3) ---- */
.progress-striped .progress-bar,
.progress.active .progress-bar {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%,
    transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
}

/* ---- Dropdown alineado a la derecha (BS5 usa dropdown-menu-end) ---- */
.dropdown-menu-right { --bs-position: end; right: 0; left: auto; }