/* =========================================
   BLOQUE PRINCIPAL: .a5-c45
   ========================================= */
.a5-c45 {
  display: flex;
  width: 100%;
  max-width: 1248px;
  padding: 96px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-09, 40px);
  margin: auto;
}
@media (max-width: 767px) {
  .a5-c45 {
    padding: 96px 16px;
  }
}

/* HEADER Y TÍTULO */
.a5-c45__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-08, 32px);
  align-self: stretch;
}

.a5-c45__title {
  max-width: 670px;
  text-transform: uppercase;
  color: var(--text-general-inverted, #FFF);
  font-family: var(--font-family-primary, "poppins");
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-lineHeight-h3, 48px);
}
@media (max-width: 1089px) {
  .a5-c45__title {
    max-width: 470px;
  }
}
@media (max-width: 767px) {
  .a5-c45__title {
    max-width: 308px;
  }
}

.a5-c45__line {
  height: 1px;
  background: var(--Text-CTA-Primary, #FFF);
  flex-grow: 1;
  align-self: baseline;
  margin-top: 26px;
}

/* CUERPO Y TEXTOS */
.a5-c45__body {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  width: 100%;
  color: var(--text-general-inverted, #FFF);
  font-family: "open";
  font-size: var(--font-size-body3, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-lineHeight-body3, 20px);
}

.a5-c45__body p {
  color: var(--text-general-inverted, #FFF);
  font-family: "open";
  font-size: var(--font-size-body3, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-lineHeight-body3, 20px);
}

/* TABLA - ESTILOS BASE */
.a5-c45__body--table {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  color: var(--text-general-inverted, #FFF);
  font-family: "open";
  font-size: var(--font-size-body3, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-lineHeight-body3, 20px);
}

.a5-c45__body--table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
  border-radius: 16px;
  overflow: hidden;
  color: var(--text-general-inverted, #FFF);
  font-family: "open";
  font-size: var(--font-size-body3, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--font-lineHeight-body3, 20px);
}

.a5-c45__body--table thead tr {
  background: var(--color-azulActinver-700, #25344D);
}

.a5-c45__body--table thead th {
  border-bottom: 0.5px solid var(--color-azulElectrico-500, #0F6FF5);
}

.a5-c45__body--table tbody tr {
  background: var(--color-azulCategorico-400, #1D293D);
  transition: background 0.2s ease-in-out;
}

.a5-c45__body--table tbody tr:hover {
  background: var(--color-azulActinver-700, #314566);
}

.a5-c45__body--table th,
.a5-c45__body--table td {
  padding: var(--spacing-04, 8px) var(--spacing-05, 12px);
  word-wrap: break-word;
}

/* =========================================
   MEDIA QUERY 767px: COMPORTAMIENTO SCROLL Y FADE
   ========================================= */
@media (max-width: 767px) {
  /* Contenedor relativo para alojar el fade absoluto */
  .a5-c45__body--table {
    position: relative;
    width: 100%;
    overflow: visible; 
  }

  /* La tabla asume el control del scroll horizontal */
  .a5-c45__body--table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    border-radius: 16px; 
  }

  /* NUEVO: Forzar un ancho mínimo para evitar que se achiquen y activen el scroll */
  .a5-c45__body--table th,
  .a5-c45__body--table td {
    min-width: 140px; 
  }

  /* NUEVO: Recuperar explícitamente el border-radius en las 4 esquinas de la tabla */
  .a5-c45__body--table thead tr th:first-child {
    border-top-left-radius: 16px;
  }
  .a5-c45__body--table thead tr th:last-child {
    border-top-right-radius: 16px;
  }
  .a5-c45__body--table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
  }
  .a5-c45__body--table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
  }

  /* Primera columna estática (sticky) */
  .a5-c45__body--table th:first-child,
  .a5-c45__body--table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    box-shadow: 16px 0 24px -8px rgba(0, 0, 0, 0.75);
    min-width: 160px; /* Un poco más de ancho para la columna principal */
  }

  /* Reseteo de fondos para evitar transparencias al scrollear */
  .a5-c45__body--table thead th:first-child {
    background: var(--color-azulActinver-700, #25344D);
  }

  .a5-c45__body--table tbody td:first-child {
    background: var(--color-azulCategorico-400, #1D293D);
  }

  .a5-c45__body--table tbody tr:hover td:first-child {
    background: var(--color-azulActinver-700, #314566);
  }

  /* Sombra (Fade) indicadora de scroll al lado derecho */
  .a5-c45__body--table::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    background: linear-gradient(90deg, rgba(10, 14, 18, 0.00) 0%, rgba(10, 14, 18, 0.75) 100%);
    pointer-events: none;
    z-index: 5;
    border-radius: 0 16px 16px 0;
    transition: opacity 0.3s ease;
  }

  /* Ocultar el fade vía JavaScript (clase inyectada) */
  .a5-c45__body--table.hide-fade::after {
    opacity: 0;
  }
}