/* ============================================================
   bs5-compat.css — bridge BS4 ↔ BS5 (Ronda 13)
   Aliases entre nomes antigos e novos de utility classes.
   Permite mover para BS5 mantendo o markup BS4 funcional, ou
   adoptar gradualmente nomes BS5 num projecto ainda BS4.

   Como funciona:
   - cada bloco @media-agnóstico declara que `.ml-2 { margin-left: 0.5rem; }`
     espelha `.ms-2`, e vice-versa, usando o mesmo valor BS4.
   - quando BS5 for carregado, os `.ms-*` continuam a funcionar (nativos)
     e os `.ml-*` continuam a funcionar (este shim).
   ============================================================ */

/* ── direcção: ml-* / ms-* (margin-left / start) ── */
.ms-0, .ml-0 { margin-left: 0 !important; }
.ms-1, .ml-1 { margin-left: 0.25rem !important; }
.ms-2, .ml-2 { margin-left: 0.5rem !important; }
.ms-3, .ml-3 { margin-left: 1rem !important; }
.ms-4, .ml-4 { margin-left: 1.5rem !important; }
.ms-5, .ml-5 { margin-left: 3rem !important; }
.ms-auto, .ml-auto { margin-left: auto !important; }

/* mr-* / me-* */
.me-0, .mr-0 { margin-right: 0 !important; }
.me-1, .mr-1 { margin-right: 0.25rem !important; }
.me-2, .mr-2 { margin-right: 0.5rem !important; }
.me-3, .mr-3 { margin-right: 1rem !important; }
.me-4, .mr-4 { margin-right: 1.5rem !important; }
.me-5, .mr-5 { margin-right: 3rem !important; }
.me-auto, .mr-auto { margin-right: auto !important; }

/* pl-* / ps-* */
.ps-0, .pl-0 { padding-left: 0 !important; }
.ps-1, .pl-1 { padding-left: 0.25rem !important; }
.ps-2, .pl-2 { padding-left: 0.5rem !important; }
.ps-3, .pl-3 { padding-left: 1rem !important; }
.ps-4, .pl-4 { padding-left: 1.5rem !important; }
.ps-5, .pl-5 { padding-left: 3rem !important; }

/* pr-* / pe-* */
.pe-0, .pr-0 { padding-right: 0 !important; }
.pe-1, .pr-1 { padding-right: 0.25rem !important; }
.pe-2, .pr-2 { padding-right: 0.5rem !important; }
.pe-3, .pr-3 { padding-right: 1rem !important; }
.pe-4, .pr-4 { padding-right: 1.5rem !important; }
.pe-5, .pr-5 { padding-right: 3rem !important; }

/* text-left / text-right ↔ text-start / text-end */
.text-start, .text-left  { text-align: left !important; }
.text-end,   .text-right { text-align: right !important; }

/* float-left / float-right ↔ float-start / float-end */
.float-start, .float-left  { float: left !important; }
.float-end,   .float-right { float: right !important; }

/* badge-* coloridos → bg-* + text-* (BS5 separa) */
.badge-primary   { background-color: #007bff !important; color: #fff !important; }
.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge-success   { background-color: #28a745 !important; color: #fff !important; }
.badge-danger    { background-color: #dc3545 !important; color: #fff !important; }
.badge-warning   { background-color: #ffc107 !important; color: #212529 !important; }
.badge-info      { background-color: #17a2b8 !important; color: #fff !important; }
.badge-light     { background-color: #f8f9fa !important; color: #212529 !important; }
.badge-dark      { background-color: #343a40 !important; color: #fff !important; }

/* close button — BS4 .close ↔ BS5 .btn-close */
.btn-close, .close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  background: transparent;
  border: 0;
  opacity: 0.5;
  cursor: pointer;
}
.btn-close:hover, .close:hover { opacity: 1; }

/* form-row → row g-2 (BS5) */
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }

/* no-gutters → g-0 */
.no-gutters, .g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0; }
.no-gutters > [class*="col-"], .g-0 > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* sr-only é deprecated em BS5; visually-hidden é o substituto (ver a11y.css) */
.sr-only-bs4 { /* alias antigo — ver a11y.css */ }

/* form-check (BS5) já existe em BS4 mas com classes diferentes
   custom-control-* → form-check (BS5) */
.custom-control { padding-left: 1.5rem; position: relative; }
.custom-control-input { position: absolute; left: 0; top: 0.25rem; }
.custom-control-label { display: inline-block; }