/* ===========================================================================
   V1 — Torre de Control
   Lectura de arriba abajo: cifras del turno → estado por país → tendencia →
   padrón completo. El componente que manda es el Price List semaforizado.
   Solo layout: todos los átomos vienen de shared/ternium.css.
   =========================================================================== */

/* 5 price lists de 298px + 4 gaps de 15px = 1550px de contenido. */
.v1-main { padding: 20px; max-width: 1620px; margin: 0 auto; }

.v1-sec { margin-bottom: 30px; }
.v1-sec__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 15px;
}
.v1-sec__head h2 { font-size: 15px; font-weight: 600; text-transform: uppercase; }
.v1-sec__head p { margin: 0; font-size: 12px; color: var(--color-text-light); }
.v1-sec__head .sp { flex: 1; }

/* Muro de price lists: es el elemento que se recuerda de esta versión.
   Va siempre en una sola fila — el manual fija el ancho del price list en
   298px, así que en pantallas angostas la fila se desplaza en horizontal
   en vez de partirse. */
.v1-wall {
  display: flex; flex-wrap: nowrap; gap: 15px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  padding: 3px 0 6px;               /* aire para el anillo de selección y la barra de scroll */
  scroll-snap-type: x proximity;
}
.v1-wall .tx-pl { flex: 0 0 auto; scroll-snap-align: start; }

.v1-pl-ball { display: flex; align-items: center; gap: 15px; }
.v1-pl-ball .txt { flex: 1; }

.v1-refs { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.v1-refs span.item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; }

.v1-chart { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 20px; padding: 20px; }
.v1-chart__side { border-left: 1px solid var(--color-border); padding-left: 20px; }

/* Cabecera compacta de la grilla: controles de 24px bajo la barra de sección. */
.v1-tools { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 10px 20px; }
.v1-tools .grow { flex: 1 1 260px; min-width: 200px; }
.v1-tools label.tx-label { font-size: 11px; margin-bottom: 4px; }
.v1-tools .f { flex: 0 0 auto; width: 150px; }

.v1-gridwrap { max-height: 560px; }

@media (max-width: 1000px) {
  .v1-chart { grid-template-columns: 1fr; }
  .v1-chart__side { border-left: 0; border-top: 1px solid var(--color-border); padding: 20px 0 0; }
}
@media (max-width: 720px) {
  .v1-main { padding: 12px; }
  .v1-tools .f { width: 100%; }
  /* En móvil el muro vuelve a apilarse: una tarjeta por fila a ancho completo. */
  .v1-wall { flex-wrap: wrap; overflow-x: visible; }
  .v1-wall .tx-pl { flex: 1 1 100%; }
}

/* El módulo que crece absorbe el alto sobrante cuando las tarjetas se igualan
   por fila, de modo que la dona quede centrada en vez de dejar un hueco. */
.v1-wall .tx-pl__mod.grow { flex: 1; display: flex; flex-direction: column; justify-content: center; }