/* ==========================================================================
   El Camino DT — El mando del planteamiento
   --------------------------------------------------------------------------
   La pieza que dibuja `mandoHTML()` en `scripts/mandos.js`: rótulo y valor,
   el dibujo, el desplegable y la frase que explica qué hace.

   La cargan las DOS pantallas que eligen el plan —la previa y el plantel— y
   por eso salió de `previa.css`: la misma pieza definida en dos hojas es la
   forma barata de que dos pantallas se vayan pareciendo cada vez menos.

   Cero tokens nuevos. Lo que cambia entre las dos es el MARCO —la previa los
   apila en una columna, el panel del once los pone en fila— y eso lo pone cada
   hoja con su contenedor, no esta.
   ========================================================================== */

.mando { display: grid; gap: var(--sp-3); }
.mando__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.mando__valor { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }

/* Los cinco escalones de la mentalidad no entran en una línea a 300px: el
   segmentado se parte en dos filas en vez de encogerse hasta ser ilegible. */
.mando .segmented { flex-wrap: wrap; }
.mando .segmented__btn { flex: 1 1 auto; }

/* EL DIBUJO DEL MANDO. Ancho completo y bajo —40 de alto sobre 96 de ancho—
   porque esta columna mide unos 300px y el dibujo tiene que caber sin robarle
   sitio a la frase, que es la que explica. El trazo hereda `currentColor` desde
   acá, así que el color apagado se define UNA vez y las partes encendidas lo
   pisan con su propio `fill`. */
.mando__dibujo {
  width: 100%;
  height: 40px;
  color: var(--text-secondary);
}

.mando__frase { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }