/* CSS propio de sense.html (sitio «origen»). Lo edita solo quien porta esa página: docs/sitio-2026/09-origen.md, «Receta para portar una página». */

/* Druppify Sense: lo que el prototipo (red-de-metro-v3/css/sense.css) resolvió solo para esta página.
   Se carga después de paginas.css y graficos.css. No redefine tokens. La línea discontinua de Sense
   (riel, bajada al andén, banda del andén, tramo de capacidades con la sexta como terminal, piloto,
   cierre y talón del boleto) ya la dibuja metro.css («Sense en su página de línea»); la galería
   «principal y dos debajo» y la vista al lado de las capacidades, paginas.css §5. Aquí quedan: la
   las piezas de las pantallas compuestas, el ciclo
   cerrado y el tablero de la prueba. Movimiento: solo la curva de la casa; nada nuevo se anima. */

/* ---------- 1 · Apertura ---------- */
/* El H1 de Sense tiene trece palabras: un paso más chico que el de Workforce para quedar en cuatro
   renglones a 1440 */
.pagina-linea[data-linea="sense"] .apertura-linea h1 { font-size: clamp(2.15rem, 1.1rem + 2.45vw, 3.75rem); max-width: 14em; }
.se-estados { display: grid; gap: 7px; }
.se-estados .estado { align-items: baseline; }
.se-estados .estado::before { transform: translateY(1px); }

/* ---------- 5 · Cómo funciona ---------- */
@media (min-width: 961px) {
  .capacidades__grid.se-capacidades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.se-parada__estado { margin-top: 6px; }
.se-parada__estado .estado { align-items: baseline; font-size: 0.84rem; }

/* Piezas de las pantallas compuestas de Sense que el kit resuelve con estilo en línea */
.pantalla .se-grafico__valor { font-size: 20px; color: #1a2044; }
.pantalla .se-grafico__dato { font-size: 13px; font-weight: 650; color: #1a2044; }
.pantalla .se-mapa svg { height: auto; aspect-ratio: 5 / 1; }
.pantalla .se-mapa .banda { fill: color-mix(in srgb, var(--linea) 14%, transparent); stroke: color-mix(in srgb, var(--linea) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pantalla .se-mapa .se-grafico__plan { stroke: #b9c1d6; stroke-width: 2; stroke-dasharray: 5 5; fill: none; }
.pantalla .se-mapa .se-grafico__vehiculo { fill: var(--linea); stroke: #ffffff; stroke-width: 3; }
/* Las tablas del kit no cortan sus chips en celular: columnas secundarias ocultas y la posición en
   dos renglones. Sin contenedor desplazable dentro de una pantalla aria-hidden (no debe recibir
   foco): bajo 660 px de pantalla se ocultan las columnas secundarias, como en las vistas de diseño. */
.pantalla .tabla td.se-envuelve { white-space: normal; min-width: 6em; }

/* ---------- 5b · El ciclo que nadie más cierra ---------- */
/* Los cinco pasos son estaciones sobre una línea discontinua que da la vuelta: del último paso baja,
   corre por debajo con el retorno y sube al primero. Arriba en escritorio; a la izquierda en celular. */
.se-ciclo__estado { margin-top: 18px; }
.se-ciclo__recorrido { position: relative; margin-top: 8px; padding: 30px 26px 82px 66px; }
.se-ciclo__recorrido::before {
  content: ""; position: absolute; z-index: 0; inset: 0 0 26px 12px;
  border: 10px dashed var(--l); border-radius: 24px; pointer-events: none;
}
.se-ciclo__pasos { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.se-ciclo__pasos li { position: relative; }
.se-ciclo__pasos li::before {
  content: ""; position: absolute; left: -66px; top: -2px; width: 34px; height: 34px; margin-left: 12px; border-radius: 50%;
  background: var(--estacion-relleno); box-shadow: inset 0 0 0 5px var(--estacion-trazo);
}
.se-ciclo .se-ciclo__pasos li::before { background: var(--fondo-2); }
.se-ciclo__pasos h3 { font: 650 1.2rem/1.3 var(--f-display); font-stretch: 102%; letter-spacing: -0.01em; }
.se-ciclo__pasos p { margin-top: 8px; color: var(--tinta-2); max-width: 30rem; }
.se-ciclo__retorno {
  position: absolute; z-index: 1; left: 50%; bottom: 31px; transform: translate(-50%, 50%);
  display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 80px);
  padding: 6px 16px; border-radius: 999px; background: var(--fondo-2);
  font: 600 0.98rem/1.3 var(--f-display); font-stretch: 102%; color: var(--tinta);
}
.se-ciclo__retorno .icono { color: var(--tinta-2); }
.se-ciclo__pie { margin-top: clamp(36px, 4vw, 56px); max-width: 52rem; font: 600 clamp(1.1rem, 1rem + 0.4vw, 1.32rem)/1.5 var(--f-display); font-stretch: 102%; letter-spacing: -0.006em; color: var(--tinta); }
@media (min-width: 1100px) {
  .se-ciclo__recorrido { padding: 56px 40px 90px; }
  .se-ciclo__recorrido::before { inset: 12px 0 26px 0; }
  .se-ciclo__pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
  .se-ciclo__pasos li::before { left: 0; top: -56px; margin-left: 0; }
}
@media (max-width: 719px) {
  .se-ciclo__recorrido { padding: 26px 18px 104px 60px; }
  .se-ciclo__recorrido::before { left: 10px; border-width: 8px; border-radius: 20px; }
  .se-ciclo__pasos li::before { left: -60px; width: 30px; height: 30px; margin-left: 9px; box-shadow: inset 0 0 0 4px var(--estacion-trazo); }
  .se-ciclo__retorno { font-size: 0.9rem; text-align: center; white-space: normal; max-width: calc(100% - 64px); }
}

/* ---------- 6 · La prueba: las tres pruebas de sta en el tablero de andén ---------- */
.se-tablero .tablero-wf__filas { grid-template-rows: none; }
.se-tablero .tablero-wf__fila dt { order: 0; max-width: none; color: #ffffff; font: inherit; }
.se-tablero .tablero-wf__fila dd { order: 0; min-width: 0; font: 500 clamp(1.04rem, 0.98rem + 0.3vw, 1.24rem)/1.5 var(--f-texto); color: var(--tablero-tinta-2); max-width: 40rem; }
.se-tablero__titulo { display: block; font: 700 clamp(1.45rem, 1.1rem + 1vw, 2.15rem)/1.1 var(--f-display); font-stretch: 100%; letter-spacing: -0.02em; color: #ffffff; }
.se-tablero__estado { margin-top: 10px; color: var(--tablero-tinta-2); }
.se-tablero .estado::before { background: var(--c-sense); box-shadow: inset 0 0 0 2px var(--c-sense); }