@layer legado {
/* ERPY · A+C · Vidrio — el chasis (25-oct-2026). Notas: docs/rediseno-visual/VIDRIO-CSS.md La dirección que eligió Rubén tras ver las… */

/* Fondo: aluminio con la luz de la malla, fijo detrás de todo */
html body {
  background-color: var(--ty-fondo);
  font-family: var(--ty-fuente);
}
html .app-shell {
  background-color: var(--ty-fondo);
  background-image:
    radial-gradient(900px 560px at 92% -12%, var(--ty-malla-a), transparent 62%),
    radial-gradient(800px 700px at -6% 104%, var(--ty-malla-b), transparent 62%),
    radial-gradient(700px 520px at 50% 45%, var(--ty-malla-c), transparent 70%);
  background-attachment: fixed;
  font-family: var(--ty-fuente);
  color: var(--ty-tinta);
}

/* Lateral: vidrio ahumado sobre grafito, flotante */
html .app-shell .command-sidebar {
  background-color: var(--ty-vidrio-ahumado);
  color: var(--ty-sobre-grafito-suave);
  border: 1px solid var(--ty-vidrio-ahumado-borde);
  border-radius: var(--ty-r-4);
  box-shadow: var(--ty-s-4);
  margin: var(--ty-e-3) 0 var(--ty-e-3) var(--ty-e-3);
  height: calc(calc(1vh * 100) - 2 * var(--ty-e-3));
  height: calc(calc(1vh * 100) - 2 * var(--ty-e-3));
  top: var(--ty-e-3);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .app-shell .command-sidebar {
    -webkit-backdrop-filter: var(--ty-desenfoque);
    backdrop-filter: var(--ty-desenfoque);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .app-shell .command-sidebar { background-color: var(--ty-grafito); }
}
html .app-shell .command-sidebar .sidebar-head,
html .app-shell .command-sidebar .sidebar-user-card,
html .app-shell .command-sidebar .sync-mini {
  background-color: transparent;
  border-color: var(--ty-vidrio-ahumado-borde);
  box-shadow: none;
  color: var(--ty-sobre-grafito-suave);
}
html .app-shell .command-sidebar .sidebar-title strong,
html .app-shell .command-sidebar .sidebar-user-card strong,
html .app-shell .command-sidebar .sync-mini strong {
  color: var(--ty-sobre-grafito);
  font-family: var(--ty-fuente);
}
html .app-shell .command-sidebar .sidebar-title strong {
  font-family: var(--ty-fuente-marca);
  letter-spacing: -0.01em;
}
html .app-shell .command-sidebar .sidebar-context,
html .app-shell .command-sidebar .sidebar-user-card span:not(.avatar) {
  color: var(--ty-sobre-grafito-suave);
}
html .app-shell .command-sidebar .avatar {
  background-color: var(--ty-marca-accion);
  color: var(--ty-sobre-marca);
}
html .app-shell .command-sidebar .nav-collapse-toggle {
  background-color: transparent;
  color: var(--ty-sobre-grafito-suave);
  border: 1px solid var(--ty-vidrio-ahumado-borde);
  border-radius: var(--ty-r-2);
  box-shadow: none;
}
html .app-shell .command-sidebar .nav-section-title {
  background-color: transparent;
  color: var(--ty-sobre-grafito-suave);
  font-size: var(--ty-t-micro);
  font-weight: var(--ty-peso-fuerte);
  letter-spacing: 0.02em;
  text-transform: none;
  border: 0;
  box-shadow: none;
}
html .app-shell .command-sidebar .nav-section-title.active,
html .app-shell .command-sidebar .nav-section-title:hover {
  color: var(--ty-sobre-grafito);
  background-color: transparent;
}
html .app-shell .command-sidebar .nav-item {
  background-color: transparent;
  color: var(--ty-sobre-grafito-suave);
  border: 0;
  border-radius: var(--ty-r-2);
  box-shadow: none;
  font-weight: var(--ty-peso-medio);
}
html .app-shell .command-sidebar .nav-item i,
html .app-shell .command-sidebar .nav-item svg {
  color: var(--ty-sobre-grafito-suave);
  background-color: transparent;
}
html .app-shell .command-sidebar .nav-item:hover {
  background-color: var(--ty-vidrio-ahumado-activo);
  color: var(--ty-sobre-grafito);
}
html .app-shell .command-sidebar .nav-item.active,
html .app-shell .command-sidebar .nav-item[aria-current="page"] {
  background-color: var(--ty-vidrio-ahumado-activo);
  color: var(--ty-sobre-grafito);
  box-shadow: inset 3px 0 0 var(--ty-acento-area-claro);
  font-weight: var(--ty-peso-fuerte);
}
html .app-shell .command-sidebar .nav-item.active i,
html .app-shell .command-sidebar .nav-item.active svg,
html .app-shell .command-sidebar .nav-item[aria-current="page"] i,
html .app-shell .command-sidebar .nav-item[aria-current="page"] svg {
  color: var(--ty-acento-area-claro);
}
html .app-shell .command-sidebar .nav-badge {
  background-color: var(--ty-vidrio-ahumado-activo);
  color: var(--ty-sobre-grafito);
  border: 0;
}
html .app-shell .command-sidebar .sidebar-tarjeta,
html .app-shell .command-sidebar .sidebar-logout {
  background-color: transparent;
  color: var(--ty-sobre-grafito-suave);
  border: 1px solid var(--ty-vidrio-ahumado-borde);
  border-radius: var(--ty-r-2);
  box-shadow: none;
}
html .app-shell .command-sidebar .sidebar-tarjeta:hover,
html .app-shell .command-sidebar .sidebar-logout:hover {
  color: var(--ty-sobre-grafito);
  background-color: var(--ty-vidrio-ahumado-activo);
}

/* Barra superior: vidrio claro flotante */
html .app-shell .command-topbar {
  background-color: var(--ty-vidrio);
  border: 1px solid var(--ty-vidrio-borde);
  border-radius: var(--ty-r-4);
  box-shadow: var(--ty-s-2);
  margin: var(--ty-e-3) var(--ty-e-3) 0;
  width: auto;
  max-width: calc(100% - 2 * var(--ty-e-3));
  box-sizing: border-box;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .app-shell .command-topbar {
    -webkit-backdrop-filter: var(--ty-desenfoque);
    backdrop-filter: var(--ty-desenfoque);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .app-shell .command-topbar { background-color: var(--ty-panel); }
}
html .app-shell .command-topbar .topbar-kicker {
  color: var(--ty-tinta-suave);
  font-size: var(--ty-t-micro);
  font-weight: var(--ty-peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
}
html .app-shell .command-topbar .topbar-title {
  color: var(--ty-tinta);
  font-weight: 750;
  font-stretch: 112%;
  letter-spacing: -0.01em;
}
html .app-shell .command-topbar .global-filter-bar button {
  border-radius: var(--ty-r-2);
}
html .app-shell .command-topbar .global-filter-bar button.active {
  background-color: var(--ty-grafito);
  color: var(--ty-sobre-grafito);
  border-color: var(--ty-grafito);
}
html .app-shell .command-topbar .topbar-user-button .avatar {
  background-color: var(--ty-grafito);
  color: var(--ty-sobre-grafito);
}

/* Botones del sistema: naranja = acción principal; el resto, sobrios */
html .app-shell .btn {
  font-family: var(--ty-fuente);
  border-radius: var(--ty-r-2);
  transition: background-color var(--ty-v-rapida) var(--ty-curva), border-color var(--ty-v-rapida) var(--ty-curva), transform var(--ty-v-rapida) var(--ty-curva);
}
html .app-shell .btn.primary {
  background-color: var(--ty-marca-accion);
  border-color: var(--ty-marca-accion);
  color: var(--ty-sobre-marca);
  box-shadow: var(--ty-s-2);
}
html .app-shell .btn.primary:hover {
  background-color: var(--ty-marca-accion-fuerte);
}
html .app-shell .btn:active {
  transform: scale(0.97);
}

/* Contenido: tarjetas opacas, la profundidad la da la sombra, no el cristal */
html .app-shell .content {
  background-color: transparent;
}
html .app-shell .content .panel {
  border-radius: var(--ty-r-3);
}

/* Barra inferior del móvil: vidrio claro flotante, respaldo opaco */
@media (max-width: 1024px) {
  html .app-shell .mobile-tabbar {
    background-color: var(--ty-panel);
    border: 1px solid var(--ty-raya);
    border-radius: var(--ty-r-4);
    box-shadow: var(--ty-s-3);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html .app-shell .mobile-tabbar {
      background-color: var(--ty-vidrio);
      border-color: var(--ty-vidrio-borde);
      -webkit-backdrop-filter: var(--ty-desenfoque);
      backdrop-filter: var(--ty-desenfoque);
    }
  }
  html .app-shell .mobile-tabbar button {
    background-color: transparent;
    color: var(--ty-tinta-suave);
    box-shadow: none;
    border: 0;
  }
  html .app-shell .mobile-tabbar button.active,
  html .app-shell .mobile-tabbar button[aria-current="page"] {
    color: var(--ty-tinta);
    background-color: transparent;
  }
  html .app-shell .mobile-tabbar button.active .tab-dot,
  html .app-shell .mobile-tabbar button[aria-current="page"] .tab-dot {
    color: var(--ty-marca-tinta);
    background-color: var(--ty-marca-velo);
  }
  html .app-shell .command-topbar {
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    border-width: 0 0 1px;
  }
}

/* Acento por área: el contenedor lo recibe de la sección activa (app-pintado.js) */
html .app-shell[data-area="operacion"] { --ty-acento-area: var(--ty-area-operacion); --ty-acento-area-claro: var(--ty-area-operacion-claro); }
html .app-shell[data-area="ventas"] { --ty-acento-area: var(--ty-area-ventas); --ty-acento-area-claro: var(--ty-area-ventas-claro); }
html .app-shell[data-area="proyectos"] { --ty-acento-area: var(--ty-area-proyectos); --ty-acento-area-claro: var(--ty-area-proyectos-claro); }
html .app-shell[data-area="compras"] { --ty-acento-area: var(--ty-area-compras); --ty-acento-area-claro: var(--ty-area-compras-claro); }
html .app-shell[data-area="contabilidad"] { --ty-acento-area: var(--ty-area-finanzas); --ty-acento-area-claro: var(--ty-area-finanzas-claro); }
html .app-shell[data-area="laboral"] { --ty-acento-area: var(--ty-area-laboral); --ty-acento-area-claro: var(--ty-area-laboral-claro); }
html .app-shell[data-area="recursos"] { --ty-acento-area: var(--ty-area-compras); --ty-acento-area-claro: var(--ty-area-compras-claro); }
html .app-shell[data-area="control"],
html .app-shell[data-area="administracion"] { --ty-acento-area: var(--ty-area-control); --ty-acento-area-claro: var(--ty-area-control-claro); }

/* Menú: fuera las cajas y degradados heredados de la sección desplegada */
html .app-shell .command-sidebar .nav-section,
html .app-shell .command-sidebar .nav-section.expanded,
html .app-shell .command-sidebar .nav-section-items {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}
html .app-shell .command-sidebar .nav-item.active,
html .app-shell .command-sidebar .nav-item[aria-current="page"],
html .app-shell .command-sidebar .nav-item:hover {
  background-image: none;
}
html .app-shell .command-sidebar .nav-item i,
html .app-shell .command-sidebar .nav-item.active i,
html .app-shell .command-sidebar .nav-item[aria-current="page"] i,
html .app-shell .command-sidebar .nav-section-title,
html .app-shell .command-sidebar .nav-section-title.active,
html .app-shell .command-sidebar .nav-section-title b {
  background-color: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}
html .app-shell .command-sidebar .nav-section-title::before,
html .app-shell .command-sidebar .nav-item::before {
  content: none;
}

/* Toda la interfaz en Archivo; los datos, en Archivo con cifras tabulares */
html .app-shell,
html .app-shell :is(h1, h2, h3, h4, p, span, strong, b, small, label, button, input, select, textarea, td, th, li, a) {
  font-family: var(--ty-fuente);
}
html .app-shell :is(td, th, .num, .amount, .money, .kpi-value) {
  font-variant-numeric: tabular-nums;
}
html .app-shell :is(code, pre, kbd, samp) {
  font-family: var(--ty-fuente-dato);
}

/* Cabecera de módulo, clara (Vidrio 3). Notas: docs/rediseno-visual/VIDRIO-CSS.md § Cabecera clara. */
html .app-shell :is(.ty-hero, .page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ty-vidrio);
  background-image: none;
  backdrop-filter: blur(var(--ty-desenfoque)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--ty-desenfoque)) saturate(160%);
  color: var(--ty-tinta);
  border: 1px solid var(--ty-vidrio-borde);
  border-radius: var(--ty-r-4);
  box-shadow: var(--ty-s-2);
  padding: var(--ty-e-6) var(--ty-e-7);
  --text-primary: var(--ty-tinta);
  --text-secondary: var(--ty-tinta-media);
  --text-muted: var(--ty-tinta-media);
  --muted: var(--ty-tinta-media);
  --ink: var(--ty-tinta);
  --cr-ink: var(--ty-tinta-media);
  --cr-ink-soft: var(--ty-tinta-media);
  --cr-ink-strong: var(--ty-tinta);
  --typy-text: var(--ty-tinta);
  --typy-text-muted: var(--ty-tinta-media);
}
@media (max-width: 640px) {
  html .app-shell :is(.ty-hero, .page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) {
    padding: var(--ty-e-4);
  }
}
html .app-shell :is(.page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) :is(h1, h2),
html .app-shell .ty-hero .ty-hero-titulo {
  color: var(--ty-tinta);
  font-family: var(--ty-fuente-marca);
  font-size: calc(var(--ty-t-titulo) * 1.55);
  font-weight: var(--ty-peso-fuerte);
  font-stretch: normal;
  line-height: var(--ty-linea-apretada);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  html .app-shell :is(.page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) :is(h1, h2),
  html .app-shell .ty-hero .ty-hero-titulo {
    font-size: calc(var(--ty-t-titulo) * 1.2);
  }
}
html body .app-shell .content .cc-intro .cc-bc {
  color: var(--ty-marca-tinta);
  opacity: 1;
  font-size: var(--ty-t-micro);
  font-weight: var(--ty-peso-fuerte);
}
html body .app-shell .content :is(.page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) :is(p, .page-intro-copy p, small),
html .app-shell .ty-hero .ty-hero-entradilla {
  color: var(--ty-tinta-media);
  opacity: 1;
  max-width: 72ch;
}
html .app-shell :is(.page-intro-v2, .customer-command-hero, .cc-intro, .ty-vidrio-facturas-hero, .project-command-bar) .eyebrow,
html .app-shell .ty-hero .ty-hero-antetitulo {
  color: var(--ty-marca-tinta);
  font-weight: var(--ty-peso-fuerte);
  text-transform: none;
  letter-spacing: 0;
}

/* Estado (crPill): tinta suave de su tono y una palabra; color pleno solo donde se decide */
html .app-shell .ty-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--ty-e-1);
  padding: 2px var(--ty-e-2);
  min-height: 24px;
  border-radius: var(--ty-r-1);
  border: 1px solid transparent;
  background-color: var(--ty-panel-hondo);
  color: var(--ty-tinta-media);
  font-size: var(--ty-t-micro);
  font-weight: var(--ty-peso-maximo);
  white-space: nowrap;
}
html .app-shell .ty-estado i {
  width: 7px;
  height: 7px;
  border-radius: var(--ty-r-pastilla);
  background-color: currentColor;
}
html .app-shell .ty-estado--success { background-color: var(--ty-exito-fondo); color: var(--ty-exito-tinta); border-color: var(--ty-exito-borde); }
html .app-shell .ty-estado--warning { background-color: var(--ty-aviso-fondo); color: var(--ty-aviso-tinta); border-color: var(--ty-aviso-borde); }
html .app-shell .ty-estado--danger { background-color: var(--ty-peligro-fondo); color: var(--ty-peligro-tinta); border-color: var(--ty-peligro-borde); }
html .app-shell .ty-estado--info { background-color: var(--ty-info-fondo); color: var(--ty-info-tinta); border-color: var(--ty-info-borde); }
html .app-shell .ty-estado--sent { background-color: var(--ty-enviado-fondo); color: var(--ty-enviado-tinta); border-color: var(--ty-enviado-borde); }
html .app-shell :is(.ty-estado--amber, .ty-estado--brand) { background-color: var(--ty-marca-velo); color: var(--ty-marca-tinta); }

/* KPI: panel opaco, cifra condensada grande; el tono va en una regleta, no en un pastel */
html .app-shell .ty-kpi-tarjeta {
  position: relative;
  background-color: var(--ty-panel);
  background-image: none;
  border: 1px solid var(--ty-raya);
  border-radius: var(--ty-r-3);
  box-shadow: var(--ty-s-2);
  overflow: hidden;
}
html .app-shell .ty-kpi-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--kpi-tinta, transparent);
}
html .app-shell .ty-kpi-tarjeta--neutral::before { background-color: transparent; }
html .app-shell .ty-kpi-tarjeta .ty-kpi-cifra {
  font-family: var(--ty-fuente);
  font-stretch: 72%;
  font-weight: 700;
  font-size: var(--ty-t-cifra);
  letter-spacing: -0.01em;
  color: var(--ty-tinta);
}
html .app-shell .ty-kpi-tarjeta.con-color .ty-kpi-cifra { color: var(--kpi-tinta); }
html .app-shell .ty-kpi-tarjeta .ty-kpi-icono {
  color: var(--kpi-tinta, var(--ty-tinta-media));
  background-color: transparent;
}
html .app-shell .ty-kpi-tarjeta.is-activa {
  border-color: var(--ty-grafito);
  box-shadow: var(--ty-s-2), 0 0 0 1px var(--ty-grafito);
}
@media (hover: hover) and (pointer: fine) {
  html .app-shell button.ty-kpi-tarjeta {
    transition: transform var(--ty-v-rapida) var(--ty-curva), box-shadow var(--ty-v-rapida) var(--ty-curva);
  }
  html .app-shell button.ty-kpi-tarjeta:hover {
    transform: translateY(-1px);
    box-shadow: var(--ty-s-3);
  }
}

/* Chips de filtro: el activo, en grafito */
html .app-shell .ty-chip {
  border-radius: var(--ty-r-2);
  font-weight: var(--ty-peso-fuerte);
}
html .app-shell .ty-chip[aria-pressed="true"] {
  background-color: var(--ty-grafito);
  border-color: var(--ty-grafito);
  color: var(--ty-sobre-grafito);
}
html .app-shell .ty-chip[aria-pressed="true"] b {
  background-color: var(--ty-vidrio-ahumado-activo);
  color: var(--ty-sobre-grafito);
}

/* Carril derecho de módulo (renderAgendaRailFor): atajos sobrios, sin mosaicos de color */
html .app-shell .module-rail .rail-card {
  background-color: var(--ty-panel);
  background-image: none;
  border: 1px solid var(--ty-raya);
  border-radius: var(--ty-r-3);
  box-shadow: var(--ty-s-1);
}
html .app-shell .module-rail .rail-title {
  color: var(--ty-tinta);
  font-size: var(--ty-t-menor);
  font-weight: var(--ty-peso-maximo);
  text-transform: none;
  letter-spacing: 0;
}
html .app-shell .module-rail .rail-metric {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--ty-raya-fina);
  border-radius: 0;
  box-shadow: none;
}
html .app-shell .module-rail .rail-metric:last-child { border-bottom: 0; }
html .app-shell .module-rail .rail-metric span { color: var(--ty-tinta-media); }
html .app-shell .module-rail .rail-metric strong {
  font-stretch: 72%;
  font-weight: 700;
  font-size: var(--ty-t-mayor);
  font-variant-numeric: tabular-nums;
}
html .app-shell .module-rail button.rail-metric:hover { background-color: var(--ty-panel-hondo); }

/* Cifras: Archivo condensada, la que se lee de lejos */
html .app-shell :is(.ty-kpi-valor, .kpi-value, .metric-value, .cr-kpi-value) {
  font-family: var(--ty-fuente);
  font-stretch: 72%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Movimiento: respeta la preferencia del sistema (los tokens ya valen 0 ms) */
@media (prefers-reduced-motion: reduce) {
  html .app-shell .btn:active { transform: none; }
}

/* Texto solo para lectores de pantalla (común a toda la app, 26-oct-2026). `.visually-hidden` es el mismo
   nombre que usan algunas pantallas heredadas (IA financiera) y no estaba definido: su etiqueta se veía. */
html .sr-only,
html .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Celda vacía de tabla (26-oct-2026): la regla heredada `.empty` (caja punteada) convertía el aviso «no hay…»
   en una caja en la primera columna. Dentro de una tabla, el aviso ocupa la fila entera como texto centrado. */
html td.empty {
  display: table-cell;
  padding: var(--ty-e-6) var(--ty-e-4);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ty-tinta-suave);
  text-align: center;
}

/* Tiras que se desplazan de lado (pestañas, chips, carruseles), marcadas por cristal.js con data-tira:
   sin barra visible, con imán al principio de cada pieza y un degradado en el borde que aún tiene más
   contenido, para que no parezcan cortadas (Vidrio 3, 26-oct-2026). */
html .app-shell [data-tira] {
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--ty-e-3);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
html .app-shell [data-tira]::-webkit-scrollbar { display: none; }
html .app-shell [data-tira] > * { scroll-snap-align: start; }
html .app-shell [data-tira][data-tira-der] {
  -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--ty-e-7)), transparent);
  mask-image: linear-gradient(to right, currentColor calc(100% - var(--ty-e-7)), transparent);
}
html .app-shell [data-tira][data-tira-izq] {
  -webkit-mask-image: linear-gradient(to left, currentColor calc(100% - var(--ty-e-7)), transparent);
  mask-image: linear-gradient(to left, currentColor calc(100% - var(--ty-e-7)), transparent);
}
html .app-shell [data-tira][data-tira-izq][data-tira-der] {
  -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--ty-e-7), currentColor calc(100% - var(--ty-e-7)), transparent);
  mask-image: linear-gradient(to right, transparent, currentColor var(--ty-e-7), currentColor calc(100% - var(--ty-e-7)), transparent);
}

/* Etiqueta de estado dentro de una celda (26-oct-2026): nunca más ancha que su columna; si no cabe, elipsis. */
html .app-shell td > :is(.pill, .status-pill, .ty-estado) {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Separación entre bloques hasta que ty-pila los sustituya (27-oct-2026). */
html .app-shell .contract-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ty-e-4);
}
html .app-shell .project-roadmap > .project-subhead { margin-bottom: var(--ty-e-3); }
html .app-shell .entity-detail-panel > .saved-view-bar-v2 { margin-bottom: var(--ty-e-3); }
}