@layer pantallas {
/* Inicio por puesto (sistema de diseño F2, lote 2, 27-oct-2026). La pantalla se compone con la biblioteca
   (cabeceraDePantalla, tarjeta, etiquetaEstado) y las primitivas (ty-pila, ty-lateral, ty-fila): aquí solo queda
   lo propio del Inicio (barras, «Hoy en ruta», colas de «Lo que falta por hacer») y, mientras no suban a la
   biblioteca, las dos piezas de static/ui/lote2.js (tarjetaDestacada, filaCola). Solo tokens --ty-*. */

/* ── Piezas del lote 2 (static/ui/lote2.js) ── */
.ty-destacada {
  position: relative; display: grid; align-content: start; gap: var(--ty-e-2); overflow: hidden; min-height: 238px;
  padding: var(--ty-ef-relleno); border-radius: var(--ty-r-4); color: var(--ty-sobre-grafito); box-shadow: var(--ty-s-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ty-petroleo) 88%, var(--ty-grafito)), var(--ty-grafito) 78%);
}
.ty-destacada::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -54px; top: -138px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ty-sobre-grafito) 18%, transparent); border-radius: var(--ty-r-pastilla);
  box-shadow: 0 0 0 var(--ty-e-5) color-mix(in srgb, var(--ty-sobre-grafito) 4%, transparent);
}
.ty-destacada > * { position: relative; min-width: 0; margin: 0; }
.ty-destacada-antetitulo {
  display: inline-flex; align-items: center; gap: var(--ty-e-2); color: color-mix(in srgb, var(--ty-sobre-grafito) 78%, transparent);
  font-size: var(--ty-t-micro); font-weight: var(--ty-peso-maximo); letter-spacing: .08em; text-transform: uppercase;
}
.ty-destacada[data-tono="peligro"] .ty-destacada-antetitulo::before { content: ""; width: 8px; height: 8px; border-radius: var(--ty-r-pastilla); background-color: var(--ty-marca); }
.ty-destacada-titulo { font: var(--ty-peso-maximo) clamp(24px, calc(1vw * 2.6), 38px)/1.1 var(--ty-fuente-marca); letter-spacing: -.03em; overflow-wrap: anywhere; }
.ty-destacada-texto { max-width: 58ch; color: color-mix(in srgb, var(--ty-sobre-grafito) 84%, transparent); overflow-wrap: anywhere; }
.ty-destacada-meta { font-weight: var(--ty-peso-fuerte); }
.ty-destacada-acciones { margin-top: var(--ty-e-2); }
.ty-destacada-secundario { color: var(--ty-sobre-grafito); border-color: color-mix(in srgb, var(--ty-sobre-grafito) 40%, transparent); background-color: transparent; }

.ty-cola {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; min-height: 72px;
  padding: 10px 2px; border: 0; border-top: 1px solid var(--ty-raya-fina); border-radius: 0; color: inherit; background-color: transparent;
  box-shadow: none; text-align: left; font: inherit; cursor: pointer;
}
.ty-cola:hover { background-color: var(--ty-panel-hondo); }
.ty-cola-cuenta { color: var(--ty-tinta); font: 750 27px/1 var(--ty-fuente-dato); font-variant-numeric: tabular-nums; text-align: center; }
.ty-cola-texto { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.ty-cola-texto strong { font-size: var(--ty-t-base); line-height: 1.25; overflow-wrap: anywhere; }
.ty-cola-texto small { color: var(--ty-tinta-media); font-size: var(--ty-t-micro); line-height: 1.3; overflow-wrap: anywhere; }
.ty-cola-flecha { color: var(--ty-tinta-suave); font-size: var(--ty-t-mayor); }

/* ── Inicio ── */
.v2i { --v2i-acento: var(--ty-marca-tinta); }
.v2i[data-puesto="tecnico"] { --v2i-acento: var(--ty-area-operacion); }
.v2i[data-puesto="almacen"] { --v2i-acento: var(--ty-area-compras); }
.v2i[data-puesto="comercial"] { --v2i-acento: var(--ty-area-ventas); }
.v2i[data-puesto="contabilidad"] { --v2i-acento: var(--ty-area-finanzas); }
.v2i-rejilla { --ty-lateral-ancho: 360px; --ty-lateral-min: 58%; align-items: flex-start; }
.v2i[data-puesto="almacen"] .v2i-card-graf { order: -1; }
.v2i .ty-cabecera-cifra b { color: var(--ty-tinta); }
.v2i-vacio { margin: 0; color: var(--ty-tinta-media); font-size: var(--ty-t-menor); }

/* Colas: las filas propias y las de «Lo que falta por hacer» con la misma forma */
.v2i-colas { display: grid; }
.v2i-colas > :first-child, .v2i-colas > .ph-grupo:first-child { border-top: 0; }
.v2i-colas .ph-grupo { margin: 0; border: 0; border-top: 1px solid var(--ty-raya-fina); border-radius: 0; background-color: transparent; box-shadow: none; }
.v2i-colas .ph-grupo-cabeza { grid-template-columns: 48px minmax(0, 1fr) auto 18px; gap: 12px; min-height: 72px; padding: 10px 2px; }
.v2i-colas .ph-grupo-texto { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.v2i-colas .ph-cuenta { min-width: 0; padding: 0; background-color: transparent; color: var(--ty-tinta); font: 750 27px/1 var(--ty-fuente-dato); }
.v2i-colas .ph-tono-danger .ph-cuenta { color: var(--ty-peligro-tinta); }
.v2i-colas .ph-grupo-titulo { font-size: var(--ty-t-base); line-height: 1.25; overflow-wrap: anywhere; }
.v2i-colas .ph-grupo-resumen { font-size: var(--ty-t-micro); overflow-wrap: anywhere; }
.v2i-colas .ph-importe { font-size: var(--ty-t-menor); }

/* Barras del puesto */
.v2i-barras { display: grid; gap: 10px; padding: 2px 0; }
.v2i-barra { display: grid; grid-template-columns: minmax(86px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--ty-t-menor); }
.v2i-barra-nombre { overflow: hidden; padding: 0; border: 0; color: var(--ty-tinta); background-color: transparent; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
button.v2i-barra-nombre { cursor: pointer; }
button.v2i-barra-nombre:hover { color: var(--v2i-acento); text-decoration: underline; }
.v2i-barra-pista { height: 9px; overflow: hidden; border-radius: var(--ty-r-pastilla); background-color: var(--ty-panel-hondo); }
.v2i-barra-pista i { display: block; height: 100%; border-radius: inherit; background-color: var(--v2i-acento); }
.v2i-barra b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Hoy en ruta: franjas de 07:00 a 19:00 */
.v2i-hoy { display: grid; gap: 10px; }
.v2i-hoy-escala, .v2i-hoy-fila { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 12px; }
.v2i-hoy-escala div { display: flex; justify-content: space-between; color: var(--ty-tinta-suave); font-size: var(--ty-t-micro); font-variant-numeric: tabular-nums; }
.v2i-hoy-fila > span { overflow: hidden; font-size: var(--ty-t-menor); text-overflow: ellipsis; white-space: nowrap; }
.v2i-hoy-pista { position: relative; height: 30px; border-radius: var(--ty-r-1); background-color: var(--ty-panel-hondo); }
.v2i-hoy-tarea {
  position: absolute; top: 3px; bottom: 3px; overflow: hidden; padding: 0 8px; border: 0; border-radius: var(--ty-r-1);
  color: var(--ty-sobre-marca); background-color: var(--ty-marca-accion); font-size: var(--ty-t-micro); font-weight: var(--ty-peso-fuerte); line-height: 24px;
  text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.v2i-hoy-tarea.hecha { color: var(--ty-tinta-media); background-color: var(--ty-raya); }
.v2i-hoy-ahora { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: var(--ty-r-1); background-color: var(--ty-marca); }
.v2i-hoy-pie { display: block; margin-top: var(--ty-e-2); color: var(--ty-tinta-media); font-size: var(--ty-t-micro); }

/* Lista corta (técnico sin horas en la agenda) */
.v2i-lista { display: grid; }
.v2i-lista-fila {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px;
  border: 0; border-top: 1px solid var(--ty-raya-fina); color: inherit; background-color: transparent; text-align: left; font: inherit; cursor: pointer;
}
.v2i-lista-fila:first-child { border-top: 0; }
.v2i-lista-fila time { color: var(--ty-tinta-media); font-variant-numeric: tabular-nums; font-size: var(--ty-t-menor); }
.v2i-lista-fila strong, .v2i-lista-fila small { display: block; }
.v2i-lista-fila small { color: var(--ty-tinta-media); font-size: var(--ty-t-micro); }

/* Más de tu jornada: lo que había antes en Inicio, plegado */
.v2i-mas > summary { padding: var(--ty-e-4) var(--ty-ef-relleno); font-weight: var(--ty-peso-fuerte); cursor: pointer; }
.v2i-mas-cuerpo { padding: 0 var(--ty-ef-relleno) var(--ty-ef-relleno); }

@media (max-width: 760px) {
  /* En el móvil las colas van justo después de la siguiente acción: es lo que se atiende primero. */
  .v2i-rejilla { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .v2i-columna { display: contents; }
  .v2i-hero { order: 1; min-height: 0; }
  .v2i-card-colas { order: 2; }
  .v2i-card-graf { order: 3; }
  .v2i-card-acciones { order: 4; }
  .v2i-barra { grid-template-columns: minmax(74px, 100px) minmax(0, 1fr) auto; gap: 7px; }
  .v2i-hoy-escala, .v2i-hoy-fila { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
  .v2i-hoy-escala div span:nth-child(even) { visibility: hidden; }
  .v2i-acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .v2i-acciones .btn { justify-content: flex-start; white-space: normal; text-align: left; }
  .v2i-colas .ph-grupo-cabeza { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .v2i-colas .ph-chevron { display: none; }
}
}