/* ==========================================================================
   El Camino DT — Objetivos
   --------------------------------------------------------------------------
   Cero tokens nuevos, y casi cero clases nuevas: el cuerpo de las cuatro
   tarjetas —`.resumen`, `.dato`, `.hueco`, `.fila-once`, `.nota-mercado`— es el
   del mercado, y esta hoja sólo dice dónde se paran.

   Dos por dos y sin scroll de página. Arriba las dos preguntas que se contestan
   de un vistazo —qué te exigen, con cuánto contás—; abajo las dos que se leen
   —dónde falta gente, a quién se le acaba—. El orden es el de la decisión: la
   vara antes que la plata, y la plata antes que la lista de compras.
   ========================================================================== */

.objetivos {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-page);
}

/* EL TILE SE QUEDA CON EL ALTO DE LO QUE DICE. Cuando acá vivía la pila entera
   estirarse a toda la fila era lo correcto: la lista se comía el hueco y el
   scroller se hacía cargo. Con el histograma y un renglón, estirarse deja una
   placa vacía más alta que su propio contenido — y una placa con un agujero
   adentro dice, sin querer, que ahí falta algo.

   Lo que queda debajo es pizarra, no hueco: el vecino de la izquierda sigue
   llevándose el alto de la fila porque su lista sí es de largo desconocido. */
.objetivos > .tile { align-self: start; }

/* La de abajo a la izquierda lleva una lista de largo desconocido y es ella la
   que scrollea, no la página. */
.objetivos__lista {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-700) transparent;
}

/* La fila de contrato con su acción. `.fila-once` es de tres columnas y la usan
   otras pantallas, así que la cuarta se agrega en una variante y no tocándola:
   acá el renglón dejó de ser una lectura y pasó a ser una decisión.

   El renglón crece de 22 a 26px porque un botón de 20 dentro de una fila de 22
   no deja aire arriba ni abajo. Es la única fila del sistema que lleva un
   control adentro, y sigue siendo mucho más densa que las de 44. */
.fila-once--accion {
  grid-template-columns: 34px minmax(0, 1fr) auto 20px auto;
  min-height: 26px;
}
.fila-once--accion .veto { white-space: nowrap; }

/* --------------------------------------------------------------------------
   LA PILA
   --------------------------------------------------------------------------
   Catorce renglones idénticos no son un escritorio: son un listado impreso.
   Lo que los ordena no es una decoración nueva sino DOS separaciones que ya
   existían en el dato y no se veían —el que se va libre y el que todavía se
   puede vender— y el plazo, que vivía tres tarjetas más arriba.

   Cero tokens nuevos: la cuenta usa la tinta de dato, el rótulo del grupo es
   el `.label` de siempre y lo urgente toma el ámbar del sistema, que ya
   significa «mirá esto antes de que sea un problema» en el club y en la mesa.
   -------------------------------------------------------------------------- */

.pila__resumen {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.pila__resumen strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Con la misma especificidad que el `strong` de arriba y no menos: escrito como
   `.pila__urge` a secas perdía contra `.pila__resumen strong` y el plazo salía
   blanco justo cuando había que mirarlo. */
.pila__resumen strong.pila__urge { color: var(--warn); }

/* --------------------------------------------------------------------------
   LO QUE OPINA LA SECRETARÍA TÉCNICA
   --------------------------------------------------------------------------
   Las dos columnas de CONSEJO y MOTIVO de FM26, con una diferencia de forma
   que sale de una de fondo: allá son dos columnas de la tabla y acá son un
   renglón propio debajo de la fila. Porque allá la columna es del juego y acá
   la opinión es de alguien, y una opinión metida entre las celdas de una tabla
   se lee como un dato. El pie de arriba son hechos del contrato; esto es de
   otra especie y se separa.

   TRES COLORES Y NINGUNO NUEVO: el verde del sistema para renovar, la arcilla
   para no, y el gris de dato apagado para «como quieras» — que no es tibieza,
   es la secretaría diciendo que ahí no hay nada que aconsejar.

   La palabra va en negrita y el motivo en el gris del pie: se barren las
   catorce leyendo sólo las negritas, y el que llama la atención se lee entero.
   Es lo mismo que hace la fila de atributo con su número y su rótulo. */
/* NO ES UN FLEX, y eso costó un renglón mal escrito antes de verlo: con
   `display: flex` cada hijo en línea pasa a ser un ítem, así que el `gap`
   se mete también entre el `<strong>` del nombre y la coma que va pegada a él
   —«Jasón Ayo , tu secretaría técnica»—. Es un párrafo y se escribe como un
   párrafo; el icono se acomoda en la línea del texto, que es lo mismo que hace
   el punto de color de «Lo que te piden». */
.pila__firma {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.pila__firma strong { color: var(--text-secondary); }
.pila__firma .i {
  display: inline-block;
  margin-right: var(--sp-2);
  vertical-align: baseline;
  color: var(--icon-quiet);
}

.consejo {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding-left: 2.6rem;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.consejo__que { white-space: nowrap; }
.consejo__porque { color: var(--text-muted); }

.consejo[data-consejo='si']   .consejo__que { color: var(--good); }
.consejo[data-consejo='no']   .consejo__que { color: var(--danger); }
.consejo[data-consejo='duda'] .consejo__que { color: var(--text-muted); }

/* Aire ENTRE grupos y no adentro: es lo que hace que se lean como dos pilas
   sobre la misma mesa y no como una lista con subtítulos. */
.pila__grupo + .pila__grupo { margin-top: var(--sp-6); }

.pila__cabecera {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* La cuenta pegada al rótulo y no al margen: dice cuántos hay en ESTA pila, y
   mandada a la derecha se leería como una columna más de la tabla de abajo. */
.pila__cuenta {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pila__nota {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* Lo prometido. No lleva fondo ni caja: el renglón ya es una fila de tabla y
   una pastilla adentro lo rompería. Lleva el color de la promesa —el mismo
   ámbar del plazo— y el icono del portapapeles, que es el que la bandeja usa
   para decir «esto espera una decisión tuya». */
.prometido {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warn);
  white-space: nowrap;
}

.prometido .i { color: currentColor; }

/* El hueco vacío no ocupa nada pero mantiene la columna: es lo que evita que
   una fila con promesa y una sin ella tengan retículas distintas. */
.prometido--vacio { padding: 0; }

/* El renglón con la palabra dada se marca en el borde y nada más: un fondo
   distinto lo sacaría de la pila, y lo que hay que decir es que sigue adentro
   pero ya tiene dueño. Es la misma marca que lleva tu llave en el cuadro. */
.fila-once--prometida { box-shadow: inset 2px 0 0 var(--warn); }

/* La banda de lo que te piden ya trae su propia superficie (`.band`, en
   app.css): acá sólo se le da el hueco. El punto de color va en la línea del
   texto, alineado con la primera letra y no flotando sobre ella. */
.objetivos .dot {
  display: inline-block;
  margin-right: var(--sp-2);
  vertical-align: baseline;
}

@media (max-width: 860px) {
  body { overflow: auto; height: auto; }
  .objetivos {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    /* Y LOS TRES QUE SÓLO SABEN CRECER CON UN ALTO ARRIBA. `flex: 1 1 0` y
       `min-height: 0` son de la retícula de alto fijo: sirven para repartir un
       alto que ya existe. Cuando esta regla suelta la página —`body` con alto
       automático, tres renglones más arriba— dejan de tener de dónde crecer y
       se quedan en su base, que es cero.

       Medido a 800×720 antes de esta línea: `.objetivos__lista` daba **32px de
       alto con 311 de contenido** —o sea la tarjeta reducida a su título— y su
       renglón en la retícula, 29,7. Y como la tarjeta suelta el `overflow` en
       esta misma regla, la lista no se recortaba: se dibujaba fuera de su caja
       y la tarjeta siguiente, que se pinta después y tiene fondo, se le ponía
       encima. **Los cuatro renglones de «Dónde te falta gente» no estaban en la
       pantalla**, que es la tarjeta que dice dónde falta gente en la pantalla
       que existe para decidir a quién comprar.

       Con el alto devuelto: la tarjeta mide 355 para 327 de contenido y su
       renglón 329. Va acá y no arriba porque arriba están bien: mientras la
       página no se baja, esos ceros son exactamente lo que reparte el alto. */
    flex: 0 1 auto;
    min-height: auto;
  }
  .objetivos__lista { overflow: visible; min-height: auto; }
}

/* --------------------------------------------------------------------------
   EL HISTOGRAMA DE CONTRATOS
   --------------------------------------------------------------------------
   Cuatro anillos con el número adentro y el rótulo al lado, en una fila. Leído
   de la card de contratos de FM26; los tramos son los nuestros, que se miden en
   temporadas y no en meses. El porqué del componente está en
   `histogramaDeContratos()`, en `contratacion.js`.

   EL ANILLO ES BORDE Y NO RELLENO, que es lo que hace la fuente y no es un
   capricho: cuatro discos llenos de rojo, ámbar, gris y verde serían cuatro
   avisos peleando, y sólo el primero es un aviso. El borde deja que el número
   —que es el dato— se lea sobre el fondo del panel y no sobre un color.

   El de «en junio» va en rojo aunque valga cero. Un cero ahí es una BUENA
   noticia y el rojo parece contradecirla, pero el color no califica el número:
   dice de qué tramo es. Si el cero cambiara de color, la fila dejaría de
   leerse como una escala. */
.histo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.histo__tramo { display: flex; align-items: center; gap: var(--sp-2); }

.histo__anillo {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 2px solid var(--ink-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.histo__anillo[data-tramo='ya']  { border-color: var(--clay-300); }
.histo__anillo[data-tramo='uno'] { border-color: var(--amber-300); }
.histo__anillo[data-tramo='dos'] { border-color: var(--ink-300); }
.histo__anillo[data-tramo='mas'] { border-color: var(--verde-300); }

.histo__rotulo {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}