/**
 * Bootstrap 5 → 4.6: utilidades y componentes que ya usamos en PHP con nombres BS5.
 * Cargar después de bootstrap.min.css. No sustituye migrar a BS5; evita clases “muertas” en BS4.
 *
 * Cubre: text-*-start/end, gap-*, m*-e/s (margin), fw-*, gutters row g-*, ps/pe-*, rounded-[1-5],
 * visually-hidden, acordeón tipo BS5 (con JS data-bs-* → data-* en bootstrap-bs5-data-compat.js).
 */

/* ——— Alineación de texto (BS5 nombres; BS4 usaba text-left en vez de text-start) ——— */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
@media (min-width: 576px) {
  .text-sm-start { text-align: left !important; }
  .text-sm-end { text-align: right !important; }
}
@media (min-width: 768px) {
  .text-md-start { text-align: left !important; }
  .text-md-end { text-align: right !important; }
}
@media (min-width: 992px) {
  .text-lg-start { text-align: left !important; }
  .text-lg-end { text-align: right !important; }
}
@media (min-width: 1200px) {
  .text-xl-start { text-align: left !important; }
  .text-xl-end { text-align: right !important; }
}

/* ——— Flex/grid gap ——— */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* ——— Márgenes inline-start/end (LTR = izquierda/derecha) ——— */
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }

/* ——— Font weight ——— */
.fw-lighter { font-weight: lighter !important; }
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: bolder !important; }

/* ——— Gutters en .row (BS5 g-0…g-5). Sobrescribe el -15px / 15px por defecto de BS4 ——— */
.row.g-0 { margin-left: 0 !important; margin-right: 0 !important; }
.row.g-0 > [class*="col-"],
.row.g-0 > .col { padding-left: 0 !important; padding-right: 0 !important; }

.row.g-1 { margin-left: -0.125rem !important; margin-right: -0.125rem !important; }
.row.g-1 > [class*="col-"],
.row.g-1 > .col { padding-left: 0.125rem !important; padding-right: 0.125rem !important; }

.row.g-2 { margin-left: -0.25rem !important; margin-right: -0.25rem !important; }
.row.g-2 > [class*="col-"],
.row.g-2 > .col { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

.row.g-3 { margin-left: -0.5rem !important; margin-right: -0.5rem !important; }
.row.g-3 > [class*="col-"],
.row.g-3 > .col { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

.row.g-4 { margin-left: -0.75rem !important; margin-right: -0.75rem !important; }
.row.g-4 > [class*="col-"],
.row.g-4 > .col { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

.row.g-5 { margin-left: -1.5rem !important; margin-right: -1.5rem !important; }
.row.g-5 > [class*="col-"],
.row.g-5 > .col { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

@media (min-width: 768px) {
  .row.g-md-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row.g-md-0 > [class*="col-"],
  .row.g-md-0 > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .row.g-lg-5 {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
  }
  .row.g-lg-5 > [class*="col-"],
  .row.g-lg-5 > .col {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ——— Padding start/end (BS4 solo pl-/pr- en muchas builds) ——— */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* ——— Border radius numéricos (BS5; BS4 solo rounded, rounded-lg, …) ——— */
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-2 { border-radius: 0.375rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }
.rounded-4 { border-radius: 0.75rem !important; }
.rounded-5 { border-radius: 1rem !important; }

/* ——— BS5 renombró .sr-only → .visually-hidden ——— */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  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;
}

/* ——— Acordeón estilo BS5 (marcado actual) sobre BS4 ——— */
.accordion {
  --bs-accordion-border-color: rgba(0, 0, 0, 0.125);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-active-color: #0c63e4;
  --bs-accordion-active-bg: #e7f1ff;
}

.accordion-item {
  color: #212529;
  background-color: #fff;
  border: 1px solid var(--bs-accordion-border-color);
}

.accordion-item:first-of-type {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.accordion-item:last-of-type {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-header { margin-bottom: 0; }

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--bs-accordion-border-color);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
  transform: rotate(-90deg);
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(0deg);
}

.accordion-button:hover {
  z-index: 2;
}

.accordion-button:focus {
  z-index: 3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.accordion-collapse {
  border-top: 1px solid transparent;
}

.accordion-item.border-0 {
  border-width: 0 !important;
}
.accordion-item.border-bottom {
  border-bottom: 1px solid var(--bs-accordion-border-color) !important;
}

/* Icono en botón: no solapar texto */
.btn > i.bi:first-child,
.btn > .bi:first-child {
  flex-shrink: 0;
}