/* Continuus Nexus - glosario v4 */

#glosario-terminos {
  padding-top: clamp(2rem, 4vw, 4rem) !important;
}

#glosario-terminos .section-inner {
  max-width: 1240px !important;
  margin: 0 auto !important;
  display: block !important;
  padding: clamp(1.25rem, 3vw, 3rem) !important;
  border-radius: 32px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(217,177,74,.18), transparent 32rem),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    #0b1017 !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#glosario-terminos .section-text {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

#glosario-terminos > .section-inner > .section-text > .eyebrow {
  color: #d8b448 !important;
  letter-spacing: .18em !important;
}

#glosario-terminos h2 {
  color: #f4f0e6 !important;
  font-size: clamp(2rem, 3.5vw, 3.55rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}

.glosario-v4 {
  margin-top: 1.5rem !important;
  color: #f2f4f8 !important;
}

.glosario-v4-intro-card,
.glosario-v4-controls {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 26px !important;
  padding: clamp(1.1rem, 2vw, 1.8rem) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    #101722 !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.38) !important;
}

.glosario-v4-intro-card {
  max-width: 980px !important;
  margin-bottom: 1.25rem !important;
  border-left: 4px solid #d8b448 !important;
}

.glosario-v4-kicker {
  margin: 0 0 .4rem !important;
  color: #d8b448 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.glosario-v4-intro-card h3,
.glosario-v4-controls h3 {
  margin: 0 0 1rem !important;
  color: #f7f1df !important;
  font-size: clamp(1.35rem, 2.1vw, 2rem) !important;
  line-height: 1.1 !important;
}

.glosario-v4-intro-card p {
  color: rgba(242,244,248,.86) !important;
  line-height: 1.75 !important;
  margin: 0 0 1rem !important;
}

.glosario-v4-version {
  color: rgba(242,244,248,.95) !important;
}

.glosario-v4-version strong {
  color: #e3c36b !important;
}

.glosario-v4-controls {
  position: sticky !important;
  top: .75rem !important;
  z-index: 20 !important;
  margin-bottom: 1.4rem !important;
  background:
    linear-gradient(180deg, rgba(16,23,34,.97), rgba(8,12,18,.96)),
    #0b1017 !important;
  backdrop-filter: blur(12px) !important;
}

.glosario-v4-controls-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

.glosario-v4-count {
  margin: .25rem 0 0 !important;
  color: rgba(242,244,248,.66) !important;
  white-space: nowrap !important;
}

.glosario-v4-fields {
  display: grid !important;
  grid-template-columns: 130px minmax(260px, 1fr) 130px minmax(260px, .9fr) !important;
  gap: .85rem !important;
  align-items: center !important;
}

.glosario-v4-fields label {
  color: rgba(242,244,248,.82) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
}

.glosario-v4-search,
.glosario-v4-select {
  width: 100% !important;
  min-height: 46px !important;
  padding: .75rem .95rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: #060a10 !important;
  color: #f5f5f5 !important;
  font-size: .98rem !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.glosario-v4-search::placeholder {
  color: rgba(245,245,245,.42) !important;
}

.glosario-v4-search:focus,
.glosario-v4-select:focus {
  border-color: rgba(216,180,72,.82) !important;
  box-shadow: 0 0 0 4px rgba(216,180,72,.13) !important;
}

.glosario-v4-empty {
  display: none !important;
  padding: 1rem !important;
  margin: 0 0 1rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(216,180,72,.35) !important;
  background: rgba(216,180,72,.10) !important;
  color: rgba(242,244,248,.85) !important;
}

.glosario-v4-empty.is-visible {
  display: block !important;
}

.glosario-v4-grid {
  column-count: 2 !important;
  column-gap: 1.15rem !important;
}

.glosario-v4-card {
  display: inline-block !important;
  width: 100% !important;
  break-inside: avoid !important;
  margin: 0 0 1.15rem !important;
  padding: clamp(1rem, 1.7vw, 1.55rem) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    #111821 !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
  scroll-margin-top: 150px !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.glosario-v4-card:nth-child(3n) {
  background:
    linear-gradient(180deg, rgba(216,180,72,.085), rgba(255,255,255,.025)),
    #101722 !important;
}

.glosario-v4-card:nth-child(4n) {
  background:
    linear-gradient(180deg, rgba(81,113,160,.10), rgba(255,255,255,.025)),
    #0f1620 !important;
}

.glosario-v4-card:hover,
.glosario-v4-card.is-highlighted {
  border-color: rgba(216,180,72,.65) !important;
  box-shadow: 0 26px 68px rgba(0,0,0,.46), 0 0 0 4px rgba(216,180,72,.11) !important;
  transform: translateY(-1px) !important;
}

.glosario-v4-card.is-hidden {
  display: none !important;
}

.glosario-v4-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: .75rem !important;
  margin-bottom: .75rem !important;
}

.glosario-v4-card h3 {
  margin: 0 !important;
  color: #f7f1df !important;
  font-size: clamp(1.16rem, 1.55vw, 1.48rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.018em !important;
}

.glosario-v4-card h3 strong {
  font-weight: 950 !important;
}

.glosario-v4-anchor {
  flex: 0 0 auto !important;
  width: 2rem !important;
  height: 2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(216,180,72,.35) !important;
  background: rgba(0,0,0,.25) !important;
  color: #d8b448 !important;
  text-decoration: none !important;
  font-weight: 900 !important;
}

.glosario-v4-anchor:hover {
  background: #d8b448 !important;
  color: #0b1017 !important;
}

.glosario-v4-card p {
  margin: 0 0 .9rem !important;
  color: rgba(242,244,248,.84) !important;
  line-height: 1.72 !important;
  text-align: left !important;
}

.glosario-v4-card p:last-child {
  margin-bottom: 0 !important;
}

.glosario-v4-top {
  margin-top: 1.3rem !important;
  text-align: right !important;
}

.glosario-v4-top a {
  color: #e3c36b !important;
  text-decoration: none !important;
}

.glosario-v4-top a:hover {
  text-decoration: underline !important;
}

@media (max-width: 980px) {
  .glosario-v4-grid {
    column-count: 1 !important;
  }

  .glosario-v4-controls {
    position: relative !important;
    top: auto !important;
  }

  .glosario-v4-controls-head {
    display: block !important;
  }

  .glosario-v4-count {
    margin-top: .6rem !important;
  }

  .glosario-v4-fields {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Continuus Nexus - corrección full width del glosario v4
   ============================================================ */

#glosario-terminos {
  width: 100% !important;
}

#glosario-terminos .section-inner,
#glosario-terminos .section-text,
#glosario-v4,
.glosario-v4 {
  width: 100% !important;
  max-width: none !important;
}

#glosario-terminos .section-inner {
  max-width: min(1480px, calc(100vw - 4rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#glosario-terminos .section-text {
  max-width: none !important;
}

.glosario-v4-intro-card {
  width: 100% !important;
  max-width: none !important;
}

.glosario-v4-controls {
  width: 100% !important;
  max-width: none !important;
}

.glosario-v4-fields {
  grid-template-columns: 110px minmax(320px, 1fr) 130px minmax(320px, 1fr) !important;
}

.glosario-v4-search,
.glosario-v4-select {
  width: 100% !important;
}

.glosario-v4-grid {
  width: 100% !important;
  column-count: 3 !important;
  column-gap: 1.15rem !important;
}

/* Tarjetas: mantener lectura agradable sin cajas excesivamente anchas */
.glosario-v4-card {
  min-width: 0 !important;
}

/* Pantallas medias: dos columnas */
@media (max-width: 1280px) {
  #glosario-terminos .section-inner {
    max-width: min(1180px, calc(100vw - 2rem)) !important;
  }

  .glosario-v4-grid {
    column-count: 2 !important;
  }
}

/* Tablet y móvil: una columna */
@media (max-width: 900px) {
  #glosario-terminos .section-inner {
    max-width: calc(100vw - 1rem) !important;
    border-radius: 20px !important;
  }

  .glosario-v4-fields {
    grid-template-columns: 1fr !important;
  }

  .glosario-v4-grid {
    column-count: 1 !important;
  }
}

/* ============================================================
   Continuus Nexus - full bleed real del glosario v4
   Fuerza salida del ancho heredado por contenedores padre.
   ============================================================ */

#glosario-terminos {
  overflow: visible !important;
}

#glosario-terminos .section-inner {
  overflow: visible !important;
}

/*
  La sección puede estar dentro de un .section-text limitado.
  Esto fuerza el bloque del glosario a ocupar el ancho útil de la ventana,
  sin romper el centrado general de la página.
*/
#glosario-v4.glosario-v4,
.glosario-v4 {
  --cn-glossary-width: min(1540px, calc(100vw - 64px));

  width: var(--cn-glossary-width) !important;
  max-width: var(--cn-glossary-width) !important;

  margin-left: calc(50% - (var(--cn-glossary-width) / 2)) !important;
  margin-right: calc(50% - (var(--cn-glossary-width) / 2)) !important;

  box-sizing: border-box !important;
}

/* La tarjeta de introducción debe tener un ancho elegante, no ocupar todo */
.glosario-v4-intro-card {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Los controles sí deben ocupar todo el ancho del glosario */
.glosario-v4-controls {
  width: 100% !important;
  max-width: 100% !important;
}

/* Distribución limpia de controles */
.glosario-v4-fields {
  display: grid !important;
  grid-template-columns: 110px minmax(280px, 1.25fr) 130px minmax(280px, 1fr) !important;
  gap: .9rem !important;
  align-items: center !important;
}

/* Grid masonry real a todo el ancho disponible */
.glosario-v4-grid {
  width: 100% !important;
  max-width: 100% !important;
  column-count: 3 !important;
  column-gap: 1.15rem !important;
}

.glosario-v4-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Escritorio medio */
@media (max-width: 1320px) {
  #glosario-v4.glosario-v4,
  .glosario-v4 {
    --cn-glossary-width: min(1180px, calc(100vw - 40px));
  }

  .glosario-v4-grid {
    column-count: 2 !important;
  }
}

/* Tablet y móvil */
@media (max-width: 900px) {
  #glosario-v4.glosario-v4,
  .glosario-v4 {
    --cn-glossary-width: calc(100vw - 24px);
  }

  .glosario-v4-fields {
    grid-template-columns: 1fr !important;
  }

  .glosario-v4-grid {
    column-count: 1 !important;
  }

  .glosario-v4-intro-card {
    max-width: 100% !important;
  }
}

/* ============================================================
   Continuus Nexus - centrado estable del glosario v4
   Corrige el full bleed anterior y recupera márgenes laterales.
   ============================================================ */

/* Anular full bleed anterior */
#glosario-v4.glosario-v4,
.glosario-v4 {
  --cn-glossary-width: unset !important;

  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: 1360px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box !important;
}

/* El contenedor de la sección debe ser amplio, pero centrado */
#glosario-terminos {
  width: 100% !important;
  overflow: visible !important;
}

#glosario-terminos .section-inner {
  width: min(1420px, calc(100vw - 96px)) !important;
  max-width: min(1420px, calc(100vw - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

#glosario-terminos .section-text {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* La tarjeta inicial no debe ocupar todo el ancho, para que respire */
.glosario-v4-intro-card {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Controles centrados y anchos */
.glosario-v4-controls {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.glosario-v4-fields {
  display: grid !important;
  grid-template-columns: 110px minmax(260px, 1.15fr) 130px minmax(260px, 1fr) !important;
  gap: .9rem !important;
  align-items: center !important;
}

/* Masonry: 3 columnas si cabe, pero dentro del contenedor centrado */
.glosario-v4-grid {
  width: 100% !important;
  max-width: 100% !important;
  column-count: 3 !important;
  column-gap: 1.15rem !important;
}

/* Pantalla media */
@media (max-width: 1320px) {
  #glosario-terminos .section-inner {
    width: min(1180px, calc(100vw - 64px)) !important;
    max-width: min(1180px, calc(100vw - 64px)) !important;
  }

  .glosario-v4 {
    max-width: 1180px !important;
  }

  .glosario-v4-grid {
    column-count: 2 !important;
  }
}

/* Tablet y móvil */
@media (max-width: 900px) {
  #glosario-terminos .section-inner {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    border-radius: 20px !important;
  }

  .glosario-v4 {
    max-width: 100% !important;
  }

  .glosario-v4-fields {
    grid-template-columns: 1fr !important;
  }

  .glosario-v4-grid {
    column-count: 1 !important;
  }

  .glosario-v4-intro-card {
    max-width: 100% !important;
  }
}

/* ============================================================
   Continuus Nexus - glosario grid final
   Desbloquea .prose y sustituye masonry por grid estable.
   ============================================================ */

/* Contenedor general centrado */
#glosario-terminos {
  width: 100% !important;
  overflow: visible !important;
}

#glosario-terminos .section-inner {
  width: min(1440px, calc(100vw - 120px)) !important;
  max-width: min(1440px, calc(100vw - 120px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(1.5rem, 3vw, 3.25rem) !important;
  overflow: visible !important;
}

/* Punto crítico: el glosario vive dentro de .prose */
#glosario-terminos .section-text,
#glosario-terminos .prose,
#glosario-v4,
.glosario-v4 {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Evitar que estilos de lectura de .prose alteren el layout */
#glosario-terminos .prose {
  display: block !important;
  padding: 0 !important;
}

/* Tarjeta de presentación: ancho completo del área útil */
.glosario-v4-intro-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 1.35rem 0 !important;
  box-sizing: border-box !important;
}

/* Controles: ancho completo y aspecto limpio */
.glosario-v4-controls {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 1.5rem 0 !important;
  box-sizing: border-box !important;
}

.glosario-v4-controls-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.25rem !important;
}

.glosario-v4-fields {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) !important;
  gap: 1rem !important;
  align-items: end !important;
}

.glosario-v4-fields label {
  display: grid !important;
  gap: .45rem !important;
  color: rgba(242,244,248,.82) !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
}

/*
  El HTML actual tiene el label y el input/select como hermanos.
  Esta regla compensa ese render y ordena visualmente los campos.
*/
.glosario-v4-fields > label:nth-of-type(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.glosario-v4-fields > .glosario-v4-search {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.glosario-v4-fields > label:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.glosario-v4-fields > .glosario-v4-select {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.glosario-v4-search,
.glosario-v4-select {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  background: #060a10 !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-size: 1rem !important;
}

/* Sustituir masonry por grid estable */
.glosario-v4-grid {
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.15rem !important;

  column-count: initial !important;
  column-gap: initial !important;
}

/* Tarjetas */
.glosario-v4-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.glosario-v4-card h3 {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.glosario-v4-card p {
  overflow-wrap: anywhere !important;
}

/* Pantalla media: dos columnas */
@media (max-width: 1280px) {
  #glosario-terminos .section-inner {
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
  }

  .glosario-v4-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet y móvil: una columna */
@media (max-width: 820px) {
  #glosario-terminos .section-inner {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    padding: 1.1rem !important;
    border-radius: 20px !important;
  }

  .glosario-v4-controls-head {
    display: block !important;
  }

  .glosario-v4-count {
    margin-top: .7rem !important;
  }

  .glosario-v4-fields {
    grid-template-columns: 1fr !important;
  }

  .glosario-v4-fields > label:nth-of-type(1),
  .glosario-v4-fields > .glosario-v4-search,
  .glosario-v4-fields > label:nth-of-type(2),
  .glosario-v4-fields > .glosario-v4-select {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .glosario-v4-grid {
    grid-template-columns: 1fr !important;
  }
}