/* Inherits container width/padding from .page-container */
.instituciones-sheet {
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
}

/* Map + filters (moved out of an inline <style> block) */
#map-container {
  width: 100%;
  margin: 0;
  padding: 0;
  /* Leaflet's own controls (zoom, attribution) use z-index: 1000 — same as
     the sticky site header. Without its own stacking context here, that tie
     is broken by DOM order and the map (later in the DOM) wins, so its zoom
     control renders on top of the header while scrolling. Pinning this
     container to z-index: 0 contains Leaflet's internal z-index below the
     header instead of competing with it globally. */
  position: relative;
  z-index: 0;
}

#map {
  width: 100%;
  height: 60vh;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.filters {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}

.filters input,
.filters select {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 15px;
  border: 2px solid var(--color-muted);
  border-radius: 0;
  background: var(--color-white);
  font-size: 14px;
  text-transform: uppercase;
}

.filters input::placeholder {
  color: var(--color-muted);
  text-transform: uppercase;
}

.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--color-muted);
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
  }

  .filters input,
  .filters select {
    width: 100%;
  }

  #map {
    height: 50vh;
  }
}

/* Inherits font/size/color/weight from .page-title (var(--fs-h1)) */
.instituciones-title {
  width: 100%;
  max-width: 780px;
  margin-top: var(--space-5);
}

.instituciones-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-top: var(--space-9);
}

.instituciones-map {
  flex: 1 1 0;
  min-width: 0;
}

.instituciones-text {
  flex: 1 1 0;
  min-width: 0;
}

p.instituciones-text-p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 991px) {
  .instituciones-row {
    flex-direction: column;
  }

  .instituciones-map,
  .instituciones-text {
    flex-basis: auto;
    width: 100%;
  }

  .instituciones-text {
    order: -1;
  }
}

@media (max-width: 575px) {
  .instituciones-title {
    width: auto;
    margin-top: 0;
  }

  .instituciones-row {
    margin-top: var(--space-6);
    gap: var(--space-8);
  }
}

/* "Ver lista de instituciones" + "Quitar filtros" buttons, sit directly
   under the map filters, side by side. */
.inst-actions-row {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
}

.inst-list-btn,
.inst-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 20px;
  border: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.inst-list-btn {
  justify-content: flex-start;
  background: var(--color-primary);
  color: var(--color-white);
}

.inst-list-btn:hover,
.inst-list-btn:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  outline: none;
}

.inst-clear-btn {
  flex: 0 0 auto;
  width: fit-content;
  border: none;
  background: var(--color-surface);
  color: var(--color-primary);
}

.inst-clear-btn:hover,
.inst-clear-btn:focus {
  background: var(--color-border);
  outline: none;
}

.inst-list-btn svg,
.inst-clear-btn svg {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .inst-actions-row {
    flex-direction: column;
  }

  .inst-clear-btn {
    width: 100%;
  }
}

/* Full-institution-list modal (SweetAlert2), reuses .inst-swal-popup styling */
.swal2-popup.inst-list-swal {
  width: 720px;
  max-width: 92vw;
}

.inst-list-scroll {
  max-height: 62vh;
  overflow-y: auto;
  text-align: left;
  padding-right: 8px;
}

.inst-list-group {
  margin-bottom: 40px;
}

.inst-list-group:last-child {
  margin-bottom: 0;
}

.inst-list-loc {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-primary);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(71, 138, 201, .2);
}

.inst-list-count {
  color: var(--color-muted);
  font-weight: 600;
}

.inst-list-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.inst-list-item:last-child {
  border-bottom: none;
}

.inst-list-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.inst-list-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--color-text);
  margin-top: 4px;
}

.inst-list-line .inst-popup-icon {
  width: 22px;
  height: 22px;
}

.inst-list-line a {
  color: var(--color-primary);
  text-decoration: none;
}

.inst-list-line a:hover {
  text-decoration: underline;
}

/* Institution marker popup (SweetAlert2). Combined with swal2's own class
   (e.g. .swal2-popup.inst-swal-popup) to win specificity deterministically
   over the CDN stylesheet, regardless of which loads first — no !important.
   Buttons additionally pass buttonsStyling:false in map_busca_ayuda.js so
   swal2 never applies its own .swal2-styled button rules in the first place. */

.swal2-popup.inst-swal-popup {
  border-radius: 0;
  padding: 28px 28px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.swal2-title.inst-swal-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: var(--color-ink);
  text-align: left;
  align-self: stretch;
  padding: 0;
  margin: 0 0 18px;
}

.swal2-html-container.inst-swal-html {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.inst-popup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.inst-popup-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.inst-popup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background-color: rgba(71, 138, 201, .12);
  color: var(--color-primary);
}

.inst-popup-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  padding-top: 4px;
}

.swal2-actions.inst-swal-actions {
  margin-top: 24px;
  gap: 12px;
}

/* buttonsStyling:false (set in map_busca_ayuda.js) stops swal2 from adding
   its own .swal2-styled class or inline colors to the buttons, so there is
   nothing left to out-specify here — plain single-class selectors are enough. */
.inst-swal-confirm,
.inst-swal-cancel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9375rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 50px;
  padding: 11px 26px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.inst-swal-confirm {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-white);
}

.inst-swal-confirm:hover,
.inst-swal-confirm:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.inst-swal-confirm:disabled {
  background-color: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-muted);
  cursor: default;
}

.inst-swal-cancel {
  background-color: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text);
}

.inst-swal-cancel:hover,
.inst-swal-cancel:focus {
  border-color: var(--color-muted-light);
  color: var(--color-ink);
}

.swal2-close.inst-swal-close {
  color: var(--color-muted-light);
  font-size: 1.5rem;
}

.swal2-close.inst-swal-close:hover {
  color: var(--color-ink);
}