/*!
 * Tablas del cuerpo de los artículos del blog.
 *
 * TEMPORAL. Estas reglas son el equivalente compilado de
 *   assets/stylesheets/sass/pages/_post_tables.scss
 * que ya está importado en style.scss (después de pages/post).
 *
 * En cuanto Álvaro recompile style.css, este archivo sobra: basta con borrar su
 * wp_enqueue_style en functions.php y este archivo. Existe solo para que las tablas
 * se vean correctamente sin regenerar un style.css de 390 KB con otro compilador.
 *
 * Va acompañado de assets/javascripts/post-tables.js.
 */

/* 2. Columna de contenido más ancha cuando hay tabla de contenidos al lado */
@media (min-width: 992px) {
  .post-content .container-inner .row > .col-lg-8 {
    width: 71.6666666667%;
  }
  .post-content .container-inner .row > .col-lg-4 {
    width: 28.3333333333%;
  }
}

/* Contenedor y affordance de scroll */
.grid-single-post .content .wp-block-table {
  position: relative;
  margin: 0 0 2rem;
  overflow-x: auto;
}
.grid-single-post .content .wp-block-table.has-scroller {
  overflow: visible;
}
@media (max-width: 767px) {
  .grid-single-post .content .wp-block-table {
    margin: 0 0 1.5rem;
  }
}
.grid-single-post .content .table-viewport {
  position: relative;
}
.grid-single-post .content .table-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--dsColor-clBlanco) 80%);
  opacity: 0;
  transition: var(--transition-ps_sec);
}
.grid-single-post .content .has-scroll:not(.at-end) .table-viewport::after {
  opacity: 1;
}
.grid-single-post .content .table-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.grid-single-post .content .table-hint {
  display: none;
  margin: 0 0 6px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--dsColor-clNeutro600);
  text-align: right;
}
.grid-single-post .content .has-scroll .table-hint {
  display: block;
}

/* 1. Tabla compacta */
.grid-single-post .content table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dsColor-clNegro);
}
@media (max-width: 767px) {
  .grid-single-post .content table {
    display: table;
    width: auto;
    min-width: 100%;
    max-width: none;
    margin: 0;
  }
  .grid-single-post .content table thead,
  .grid-single-post .content table tbody {
    display: table-row-group;
  }
  .grid-single-post .content table tr {
    display: table-row;
  }
}
.grid-single-post .content table tr th,
.grid-single-post .content table tr td,
.grid-single-post .content table tr td:has(+ td) {
  box-sizing: border-box;
  padding: 10px;
  border: 0;
  border-bottom: solid 1px var(--dsColor-clPrimarioMedio);
  vertical-align: top;
  min-width: 110px;
  background-color: var(--dsColor-clBlanco);
  color: var(--dsColor-clNegro);
  font-weight: normal;
  text-align: left;
}
@media (max-width: 767px) {
  .grid-single-post .content table tr th,
  .grid-single-post .content table tr td,
  .grid-single-post .content table tr td:has(+ td) {
    display: table-cell;
    min-width: 110px;
    padding: 10px;
  }
}
.grid-single-post .content table tr th a,
.grid-single-post .content table tr td a {
  color: var(--dsColor-clPrimario);
  font-style: normal;
  font-weight: inherit;
  text-decoration: underline;
}
.grid-single-post .content table tr th a:hover,
.grid-single-post .content table tr td a:hover {
  color: var(--dsColor-clPrimario);
}

/* Cabecera: <thead> real o primera fila en negrita marcada por el JS */
.grid-single-post .content table thead th,
.grid-single-post .content table thead td,
.grid-single-post .content table tr.is-head th,
.grid-single-post .content table tr.is-head td,
.grid-single-post .content table tr.is-head td:has(+ td) {
  background-color: var(--dsColor-clPrimarioClaro);
  color: var(--dsColor-clPrimario);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  vertical-align: bottom;
  border-bottom: solid 2px var(--dsColor-clPrimarioMedio);
}
.grid-single-post .content table thead th:first-child,
.grid-single-post .content table thead td:first-child,
.grid-single-post .content table tr.is-head th:first-child,
.grid-single-post .content table tr.is-head td:first-child {
  border-top-left-radius: 8px;
}
.grid-single-post .content table thead th:last-child,
.grid-single-post .content table thead td:last-child,
.grid-single-post .content table tr.is-head th:last-child,
.grid-single-post .content table tr.is-head td:last-child {
  border-top-right-radius: 8px;
}
.grid-single-post .content table thead th strong,
.grid-single-post .content table thead th b,
.grid-single-post .content table thead td strong,
.grid-single-post .content table thead td b,
.grid-single-post .content table tr.is-head th strong,
.grid-single-post .content table tr.is-head th b,
.grid-single-post .content table tr.is-head td strong,
.grid-single-post .content table tr.is-head td b {
  font-weight: inherit;
}

/* Primera columna fija al desplazar en horizontal */
.grid-single-post .content table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: 600;
  box-shadow: 1px 0 0 var(--dsColor-clPrimarioMedio);
}
.grid-single-post .content table tr > :first-child strong,
.grid-single-post .content table tr > :first-child b {
  font-weight: inherit;
}
.grid-single-post .content table thead tr > :first-child,
.grid-single-post .content table tr.is-head > :first-child {
  z-index: 3;
}

/* Sin cabecera (.is-plain): la primera columna hace de cabecera de fila */
.grid-single-post .content table.is-plain tr > :first-child {
  background-color: var(--dsColor-clPrimarioClaro);
  border-bottom-color: var(--dsColor-clBlanco);
  box-shadow: none;
}
.grid-single-post .content table.is-plain tr > :first-child:nth-last-child(2) {
  width: 32%;
}
.grid-single-post .content table.is-plain tr:first-child > :first-child {
  border-top-left-radius: 8px;
}
.grid-single-post .content table.is-plain tr:last-child > :first-child {
  border-bottom-left-radius: 8px;
  border-bottom-color: transparent;
}

/* 3. Móvil: filas apiladas en tarjetas (tablas de 5 o más columnas con cabecera) */
@media (max-width: 767px) {
  .grid-single-post .content table.is-stacked {
    display: block;
    width: auto;
    min-width: 0;
  }
  .grid-single-post .content table.is-stacked thead,
  .grid-single-post .content table.is-stacked tbody,
  .grid-single-post .content table.is-stacked tr,
  .grid-single-post .content table.is-stacked th,
  .grid-single-post .content table.is-stacked td,
  .grid-single-post .content table.is-stacked td:has(+ td) {
    display: block;
    width: auto;
    min-width: 0;
  }
  .grid-single-post .content table.is-stacked thead,
  .grid-single-post .content table.is-stacked tr.is-head {
    display: none;
  }
  .grid-single-post .content table.is-stacked tr {
    margin: 0 0 12px;
    padding: 16px 18px 12px;
    border-radius: var(--border-radius-ps_cta);
    background-color: var(--dsColor-clPrimarioClaro);
  }
  .grid-single-post .content table.is-stacked th,
  .grid-single-post .content table.is-stacked td {
    position: static;
    padding: 7px 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
  }
  .grid-single-post .content table.is-stacked tr > :first-child {
    margin: 0 0 4px;
    padding: 0 0 8px;
    border-bottom: solid 1px var(--dsColor-clPrimarioMedio);
    font-family: "Roboto Serif", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dsColor-clPrimario);
  }
  .grid-single-post .content table.is-stacked tr > :not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 2px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dsColor-clNeutro600);
  }
}