/* ===========================================================
   Página "Módulos del SAG" — reusa los tokens de style.css
   =========================================================== */

.sag-banner {
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, var(--blue) 130%);
  padding: 3.5rem 0;
  text-align: center;
}
.sag-banner h1 {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0;
}

.sag-section { padding: 3rem 0; }

.sag-oracle {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--navy); margin-top: .25rem;
}
.sag-oracle i { color: var(--blue); }

.sag-title-bar {
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  padding: .9rem 0;
}

.sag-chip-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
}
.sag-chip {
  background: var(--bg-soft);
  border: 1px solid rgba(14,107,168,.15);
  color: var(--navy);
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-size: .92rem;
}
.sag-chip-num {
  color: var(--blue);
  font-weight: 700;
  margin-right: .15rem;
}

.sag-list {
  list-style: none; padding: 0; margin: 0;
  color: var(--text-muted);
}
.sag-list li {
  position: relative; padding: .4rem 0 .4rem 1.6rem; line-height: 1.65;
}
.sag-list li::before {
  content: "\f26b"; font-family: "bootstrap-icons";
  position: absolute; left: 0; top: .48rem; color: var(--blue); font-size: .85rem;
}

.sag-list-columns {
  columns: 2; column-gap: 2.5rem;
}
.sag-list-columns li { break-inside: avoid; }
@media (max-width: 767px) { .sag-list-columns { columns: 1; } }

.sag-accordion-section .accordion-item {
  border: 1px solid rgba(14,107,168,.15);
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: .75rem;
}
.sag-accordion-section .accordion-button {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  background: var(--bg-soft);
}
.sag-accordion-section .accordion-button:not(.collapsed) {
  background: var(--blue); color: var(--white); box-shadow: none;
}
.sag-accordion-section .accordion-button:focus { box-shadow: 0 0 0 3px rgba(14,107,168,.2); }
.sag-accordion-section .accordion-button::after { filter: none; }
.sag-acc-num {
  color: var(--blue);
  margin-right: .3rem;
}
.sag-accordion-section .accordion-button:not(.collapsed) .sag-acc-num { color: var(--white); }