/* ==========================================================================
   PLAN CANJE — vendor.css
   Subconjunto mínimo y autohospedado que reemplaza a Bootstrap 5.
   Reimplementa SOLO lo que el sitio usa realmente: reboot, grid (container/
   row/col/gutters), utilidades de flex/spacing/display, y la estructura base
   de navbar, breadcrumb, pagination, accordion, forms y buttons.
   El aspecto visual (colores, tipografías) vive en style.css, que se carga
   DESPUÉS de este archivo. El comportamiento del menú móvil y del acordeón
   lo maneja js/main.js (sin dependencia de Bootstrap JS).
   Breakpoints: sm=576px, md=768px, lg=992px.
   ========================================================================== */

/* ---------- Reboot ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; line-height: 1.2; }
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; }
img, svg { vertical-align: middle; }
button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---------- Grid ---------- */
.row {
  --gx: 1.5rem;
  --gy: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gy));
  margin-right: calc(-0.5 * var(--gx));
  margin-left: calc(-0.5 * var(--gx));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  margin-top: var(--gy);
  padding-right: calc(var(--gx) * 0.5);
  padding-left: calc(var(--gx) * 0.5);
}

/* Gutters (afectan x e y, como en Bootstrap) */
.g-2 { --gx: 0.5rem; --gy: 0.5rem; }
.g-4 { --gx: 1.5rem; --gy: 1.5rem; }
.g-5 { --gx: 3rem;   --gy: 3rem; }

/* Columnas usadas por el sitio */
.col-6 { width: 50%; }

@media (min-width: 576px) {
  .col-sm-7    { width: 58.333333%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
}
@media (min-width: 768px) {
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  .col-lg-2 { width: 16.666667%; }
  .col-lg-4 { width: 33.333333%; }
  .col-lg-5 { width: 41.666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.333333%; }
  .col-lg-8 { width: 66.666667%; }
}

/* ---------- Utilidades de display ---------- */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
@media (min-width: 576px) { .d-sm-inline { display: inline !important; } }

/* ---------- Utilidades de flex ---------- */
.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
@media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; } }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start   { align-items: flex-start !important; }
.align-items-center  { align-items: center !important; }
.ms-auto { margin-left: auto !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
@media (min-width: 992px) { .gap-lg-2 { gap: 0.5rem !important; } }

/* ---------- Utilidades de tamaño / texto ---------- */
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }

/* ---------- Utilidades de spacing ---------- */
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }

/* ---------- Otras utilidades ---------- */
.list-unstyled { padding-left: 0; list-style: none; }
.sticky-top { position: sticky; top: 0; z-index: 1020; }
.h3 { font-size: 1.75rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Navbar ---------- */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand { display: inline-block; text-decoration: none; }
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.nav-link { display: block; text-decoration: none; }
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  cursor: pointer;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }

/* Colapsable genérico (navbar + accordion) */
.collapse:not(.show) { display: none; }

/* En ≥992px el menú se expande y el botón hamburguesa desaparece */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
  .navbar-expand-lg .navbar-toggler { display: none; }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
}
.breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; }
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  content: "/";
}

/* ---------- Pagination ---------- */
.pagination { display: flex; padding-left: 0; list-style: none; }
.page-link {
  position: relative;
  display: block;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.page-item:not(:first-child) .page-link { margin-left: -1px; }
.page-item:first-child .page-link {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.page-item:last-child .page-link {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.page-item.disabled .page-link { pointer-events: none; }

/* ---------- Accordion ---------- */
.accordion-item { background-color: #fff; border: 1px solid #dee2e6; }
.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: 1rem 1.25rem;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.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;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.accordion-body { padding: 1rem 1.25rem; }

/* ---------- Forms ---------- */
.form-label { margin-bottom: 0.5rem; }
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  appearance: none;
}
.form-control:focus {
  border-color: var(--color-primary-light, #17575A);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(15, 61, 62, 0.2);
}
.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  color: inherit;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}
.btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; }
.btn-outline-light:hover { color: #000; background-color: #f8f9fa; }