.panel-lateral_abrir__sk9m3 { color: var(--color-tenue); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; padding: 4px 8px; cursor: pointer; }
.panel-lateral_panel__XKwtB { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(32rem, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; border: 0; border-left: 1px solid var(--color-borde); background: var(--color-superficie); color: var(--color-tinta); text-align: left; white-space: normal; }
.panel-lateral_panel__XKwtB::backdrop { background: color-mix(in srgb, var(--color-tinta) 30%, transparent); }
.panel-lateral_cabecera__4OfBx { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid var(--color-borde); }
.panel-lateral_cabecera__4OfBx h2 { min-width: 0; overflow-wrap: anywhere; font-size: 20px; font-weight: 600; }
.panel-lateral_cabecera__4OfBx button { flex-shrink: 0; min-height: 40px; color: var(--color-acento); cursor: pointer; }
.panel-lateral_contenido__XPUk1 { display: grid; gap: 16px; min-width: 0; padding: 20px; overflow-wrap: anywhere; }
.panel-lateral_contenido__XPUk1 a { color: var(--color-acento); text-decoration: underline; }
.panel-lateral_contenido__XPUk1 dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
.panel-lateral_contenido__XPUk1 dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.panel-lateral_abrir__sk9m3:focus-visible, .panel-lateral_cabecera__4OfBx button:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }

/*
 * LAS PIEZAS DE LA UX FINAL (`components/ux/`, tanda 0 del plan PLAN-UX-COMPLETA-20261025): los equivalentes React de
 * T.kpis, T.chips, T.tabla, T.panel, T.modal, T.pill, T.barraProg y los pasos del clon (`docs/ux-final/index.html`).
 * Pintan SÓLO con tokens (`--color-*` de globals/tema-v4 y `--v4-*`), así que andan en claro y en oscuro, con o sin la
 * piel v4. Nada de colores literales. Todo entra en 400 px: las grillas colapsan, las tablas se desplazan solas.
 */

/* ---------- cifras arriba (T.kpis) ---------- */
.ux-cifras {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.ux-cifra {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--v4-borde-suave);
  border-radius: var(--v4-radio-l);
  background: var(--color-superficie);
  box-shadow: var(--v4-sombra-1);
  padding: 14px 16px;
  color: var(--color-tinta);
  text-decoration: none;
}
.ux-cifra[data-tono='favorable'] { border-left: 3px solid var(--color-favorable); }
.ux-cifra[data-tono='aviso'] { border-left: 3px solid var(--color-aviso); }
.ux-cifra[data-tono='alarma'] { border-left: 3px solid var(--color-alarma); }
a.ux-cifra { transition: border-color var(--v4-transicion); }
a.ux-cifra:hover { border-color: var(--color-acento); }
a.ux-cifra:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; box-shadow: var(--v4-anillo); }
.ux-cifra-rotulo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-tenue); }
.ux-cifra-valor { font-size: clamp(1.125rem, 2.2vw, 1.6rem); font-weight: var(--v4-peso-semi); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
/*
 * Un importe no se parte en el medio («$ 12.345.6» / «78»): a 1366 px con 4–5 cifras por fila pasaba en Resultados
 * (NO-GO 25/10, P3). La tarjeta es contenedor y la cifra se achica con SU ancho (cqi) en vez del de la ventana; sólo se
 * corta en espacios. Sin soporte de container queries queda la regla de arriba.
 */
@supports (font-size: 1cqi) {
  .ux-cifra { container-type: inline-size; }
  .ux-cifra-valor { font-size: clamp(0.95rem, 12.5cqi, 1.6rem); }
}
.ux-cifra-valor[data-sin-dato] { font-size: var(--v4-texto-base); font-weight: var(--v4-peso-medio); color: var(--color-tenue); overflow-wrap: anywhere; }
.ux-cifra-detalle { font-size: 12px; color: var(--color-tenue); }
.ux-cifra-ir { margin-top: 2px; font-size: 12px; color: var(--color-acento); }

/* ---------- pill de estado (T.pill): forma + palabra + color ---------- */
.ux-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--v4-radio-pastilla);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: var(--v4-peso-medio);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--color-grilla);
  color: var(--color-tinta);
}
.ux-pill-forma { display: inline-flex; width: 1em; justify-content: center; font-size: 11px; font-weight: var(--v4-peso-fuerte); }
.ux-pill[data-tono='favorable'] { background: var(--color-favorable-suave); }
.ux-pill[data-tono='favorable'] .ux-pill-forma { color: var(--color-favorable); }
.ux-pill[data-tono='aviso'] { background: var(--color-aviso-suave); }
.ux-pill[data-tono='aviso'] .ux-pill-forma { color: var(--color-aviso); }
.ux-pill[data-tono='alarma'] { background: var(--color-alarma-suave); }
.ux-pill[data-tono='alarma'] .ux-pill-forma { color: var(--color-alarma); }
.ux-pill[data-tono='acento'] { background: var(--color-destacado-suave); }
.ux-pill[data-tono='acento'] .ux-pill-forma { color: var(--color-acento); }
.ux-pill[data-tono='normal'] .ux-pill-forma { color: var(--color-tenue); }

/* ---------- chips de filtro (T.chips) ---------- */
.ux-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  border: 1px solid var(--color-borde);
  border-radius: var(--v4-radio-pastilla);
  background: var(--color-superficie);
  padding: 4px 12px;
  font-size: var(--v4-texto-sm);
  color: var(--color-tenue);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--v4-transicion), border-color var(--v4-transicion);
}
.ux-chip:hover { color: var(--color-tinta); }
.ux-chip:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
/* Elegido: borde, fondo Y peso (no sólo color), más la tilde. */
.ux-chip[aria-pressed='true'],
.ux-chip[aria-current='true'] { border-color: var(--color-acento); background: var(--color-destacado-suave); color: var(--color-acento); font-weight: var(--v4-peso-semi); }
.ux-chip-conteo { font-size: 12px; font-weight: var(--v4-peso-medio); opacity: 0.8; font-variant-numeric: tabular-nums; }

/* ---------- botones (sobre .v4-boton) ---------- */
.ux-boton-peligro.v4-boton { background: var(--color-alarma); }
.ux-boton-peligro.v4-boton:hover { background: color-mix(in oklch, var(--color-alarma) 88%, var(--color-tinta)); }
.ux-boton-chico.v4-boton { min-height: 28px; padding: 3px 10px; font-size: var(--v4-texto-xs); }
.ux-cerrar { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; border-radius: var(--v4-radio-s); color: var(--color-tenue); }
.ux-cerrar:hover { color: var(--color-tinta); background: var(--color-destacado-suave); }
.ux-cerrar:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

/* ---------- tabla (T.tabla) ---------- */
.ux-tabla { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.ux-tabla-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ux-tabla-buscar {
  min-height: 34px;
  min-width: 0;
  flex: 1 1 220px;
  border: 1px solid var(--color-borde);
  border-radius: var(--v4-radio-m);
  background: var(--color-superficie);
  padding: 6px 10px;
  font-size: var(--v4-texto-sm);
  color: var(--color-tinta);
}
.ux-tabla-elegidas { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-tabla table { width: 100%; border-collapse: collapse; font-size: var(--v4-texto-sm); }
.ux-tabla th {
  background: var(--v4-tabla-encabezado);
  padding: var(--v4-tabla-celda-y) var(--v4-tabla-celda-x);
  text-align: left;
  font-size: var(--v4-texto-xs);
  font-weight: var(--v4-peso-rotulo);
  color: var(--color-tenue);
  white-space: nowrap;
}
.ux-tabla td { border-top: 1px solid var(--v4-borde-suave); padding: var(--v4-tabla-celda-y) var(--v4-tabla-celda-x); vertical-align: top; color: var(--color-tinta); }
.ux-tabla [data-num] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-tabla-orden { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; cursor: pointer; }
.ux-tabla-orden:hover { color: var(--color-tinta); }
.ux-tabla-orden:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.ux-tabla tr[data-clic] { cursor: pointer; }
.ux-tabla tbody tr:hover { background: var(--v4-tabla-hover); }
.ux-tabla tr[aria-selected='true'] { background: var(--color-destacado-suave); }
.ux-tabla-vacio { padding: 18px 12px; text-align: center; color: var(--color-tenue); }
.ux-tabla-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--v4-texto-xs); color: var(--color-tenue); }

/* ---------- panel lateral (T.panel) y modal (T.modal) ---------- */
.ux-panel,
.ux-modal {
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-tinta);
  box-shadow: var(--v4-sombra-2);
  padding: 0;
}
.ux-panel::backdrop,
.ux-modal::backdrop { background: color-mix(in oklch, var(--color-tinta) 30%, transparent); }
.ux-panel[open] {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-width: 0 0 0 1px;
  overscroll-behavior: contain;
}
.ux-modal[open] {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  border-radius: 16px;
  overflow: auto;
}
.ux-dialogo-cab { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--v4-borde-suave); padding: 18px 20px 12px; }
.ux-modal .ux-dialogo-cab { border-bottom: 0; padding-bottom: 6px; }
.ux-dialogo-cab h2 { min-width: 0; flex: 1; font-size: var(--v4-texto-lg); font-weight: var(--v4-peso-semi); overflow-wrap: anywhere; }
.ux-dialogo-bajada { margin-top: 2px; font-size: var(--v4-texto-sm); color: var(--color-tenue); }
.ux-dialogo-cuerpo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 14px; overflow-y: auto; padding: 16px 20px; overflow-wrap: anywhere; }
.ux-modal .ux-dialogo-cuerpo { padding-top: 6px; }
.ux-dialogo-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--v4-borde-suave); padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
.ux-modal .ux-dialogo-pie { border-top: 0; padding-bottom: 16px; }

/* ---------- barra de progreso (T.barraProg) y pasos lineales ---------- */
.ux-progreso { height: 6px; overflow: hidden; border-radius: var(--v4-radio-pastilla); background: var(--color-grilla); }
.ux-progreso > i { display: block; height: 100%; border-radius: var(--v4-radio-pastilla); background: var(--color-acento); transition: width 300ms; }
.ux-pasos { display: flex; flex-direction: column; gap: 8px; }
.ux-pasos-avance { display: flex; justify-content: space-between; gap: 8px; font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-pasos ol { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-pasos li { display: flex; min-width: min(100%, 130px); flex: 1; }
.ux-paso {
  display: flex;
  width: 100%;
  flex-direction: column;
  border: 1px solid var(--color-borde);
  border-radius: var(--v4-radio-m);
  background: var(--color-superficie);
  padding: 8px 11px;
  text-align: left;
  color: var(--color-tinta);
  text-decoration: none;
}
a.ux-paso:hover, button.ux-paso:hover { border-color: var(--color-acento); }
.ux-paso:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.ux-paso[aria-current='step'] { border-color: var(--color-acento); box-shadow: inset 0 0 0 1px var(--color-acento); }
.ux-paso-n { font-size: 11.5px; color: var(--color-tenue); }
.ux-paso-n [data-estado='listo'] { color: var(--color-favorable); }
.ux-paso-n [data-estado='falta'] { color: var(--color-aviso); }
.ux-paso b { font-size: var(--v4-texto-sm); font-weight: var(--v4-peso-semi); }

/* ---------- resumen que filtra (tarjetas por categoría, pedido 02/11) ---------- */
.ux-resumen {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.ux-resumen-tarjeta { min-height: 40px; padding: 10px 12px; }
.ux-resumen-tarjeta[data-tono='acento'] { border-left: 3px solid var(--color-acento); }
.ux-resumen-tarjeta[data-tono='normal'] { border-left: 3px solid var(--color-borde); }
/* Elegida: borde, fondo Y tilde (no sólo color). */
.ux-resumen-tarjeta[aria-current='true'] { border-color: var(--color-acento); background: var(--color-destacado-suave); }

/* ---------- barrita de escenarios conservador–esperado–agresivo (pedido 02/11) ---------- */
.ux-escenarios { display: inline-flex; width: 100%; min-width: 96px; max-width: 160px; flex-direction: column; gap: 3px; vertical-align: middle; }
.ux-escenarios-pista { position: relative; display: block; height: 6px; border-radius: var(--v4-radio-pastilla); background: var(--color-grilla); }
.ux-escenarios-tramo { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: var(--v4-radio-pastilla); background: color-mix(in oklch, var(--color-acento) 45%, transparent); }
.ux-escenarios-marca { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: var(--color-tinta); }
.ux-escenarios-numeros { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--color-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-escenarios-numeros strong { color: var(--color-tinta); font-weight: var(--v4-peso-semi); }

/* ======================================================================================================================
 * CLARIDAD DE MÓDULOS (propuesta 04/11/2026, aprobada por Ignacio): los 8 patrones. Sólo tokens; en 400 px una columna.
 * ==================================================================================================================== */

/* ---------- 1 · la respuesta: una cifra grande que contesta la pregunta del título ---------- */
.ux-respuesta {
  container-type: inline-size;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--v4-borde-suave);
  border-left: 3px solid var(--color-borde);
  border-radius: var(--v4-radio-l);
  background: var(--color-superficie);
  box-shadow: var(--v4-sombra-1);
  padding: 16px 18px;
  color: var(--color-tinta);
}
.ux-respuesta[data-tono='favorable'] { border-left-color: var(--color-favorable); }
.ux-respuesta[data-tono='aviso'] { border-left-color: var(--color-aviso); }
.ux-respuesta[data-tono='alarma'] { border-left-color: var(--color-alarma); }
.ux-respuesta-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--v4-texto-sm); font-weight: var(--v4-peso-medio); }
.ux-respuesta-subtitulo { font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-respuesta-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.ux-respuesta-valor { font-size: var(--v4-cifra-destacada, 2rem); font-weight: var(--v4-peso-semi); line-height: 1.15; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.ux-respuesta-valor[data-sin-dato] { font-size: var(--v4-texto-base); font-weight: var(--v4-peso-medio); color: var(--color-tenue); overflow-wrap: anywhere; }
.ux-respuesta-motivo { font-size: var(--v4-texto-sm); }
.ux-respuesta-enlace { color: inherit; text-decoration: none; }
.ux-respuesta-enlace:hover { color: var(--color-acento); }
.ux-respuesta-enlace:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.ux-respuesta-comparacion { font-size: var(--v4-texto-sm); color: var(--color-tenue); }
.ux-respuesta-frase { max-width: 70ch; font-size: var(--v4-texto-sm); color: var(--color-tinta); }

/* ---------- 2 · cifras de apoyo, más chicas, con «¿De dónde sale?» ---------- */
.ux-cifras[data-variante='apoyo'] { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ux-cifras[data-variante='apoyo'] .ux-cifra { padding: 10px 12px; box-shadow: none; }
@supports (font-size: 1cqi) {
  .ux-cifras[data-variante='apoyo'] .ux-cifra-valor { font-size: clamp(0.9rem, 10cqi, 1.2rem); }
}
.ux-cifra-origen { margin-top: 2px; font-size: 12px; color: var(--color-tenue); }
.ux-cifra-origen > summary { cursor: pointer; color: var(--color-acento); list-style: revert; }
.ux-cifra-origen > summary:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.ux-cifra-origen > p { margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .ux-cifras[data-variante='apoyo'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 3 · qué hago ahora: hasta 3 pasos numerados, arriba de la tabla ---------- */
.ux-que-hago { border: 1px solid var(--color-borde); border-radius: var(--v4-radio-l); background: var(--color-superficie); padding: 12px 14px; }
.ux-que-hago-titulo { margin-bottom: 8px; font-size: var(--v4-texto-xs); font-weight: var(--v4-peso-medio); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-tenue); }
.ux-que-hago ol { display: flex; flex-direction: column; gap: 10px; }
.ux-que-hago-paso { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; font-size: var(--v4-texto-sm); }
.ux-que-hago-n {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--v4-radio-pastilla);
  background: var(--color-destacado-suave);
  color: var(--color-acento);
  font-size: var(--v4-texto-xs);
  font-weight: var(--v4-peso-semi);
}
.ux-que-hago-texto { display: flex; min-width: 0; flex: 1 1 220px; flex-direction: column; gap: 2px; }
.ux-que-hago-texto b { font-weight: var(--v4-peso-semi); }
.ux-que-hago-detalle { font-size: var(--v4-texto-xs); color: var(--color-tenue); }
@media (max-width: 480px) {
  .ux-que-hago-paso > .v4-boton { margin-left: 32px; }
}

/* ---------- 4 · desglose que cierra ---------- */
.ux-desglose { display: flex; min-width: 0; flex-direction: column; gap: 8px; border: 1px solid var(--v4-borde-suave); border-radius: var(--v4-radio-l); background: var(--color-superficie); padding: 12px 14px; }
.ux-desglose-titulo { font-size: var(--v4-texto-sm); font-weight: var(--v4-peso-semi); }
.ux-desglose dl { display: flex; flex-direction: column; }
.ux-desglose-paso { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--v4-borde-suave); padding: 6px 0; font-size: var(--v4-texto-sm); }
.ux-desglose-paso:first-child { border-top: 0; }
.ux-desglose-paso > dt { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.ux-desglose-paso > dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-desglose-paso > dd[data-sin-dato] { color: var(--color-tenue); }
.ux-desglose-signo { display: inline-flex; width: 1em; flex: none; justify-content: center; color: var(--color-tenue); font-weight: var(--v4-peso-semi); }
.ux-desglose-detalle { display: block; font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-desglose-paso[data-resultado] { border-top: 3px double var(--color-borde); font-weight: var(--v4-peso-semi); }
.ux-desglose-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--v4-texto-xs); color: var(--color-tenue); }

/* ---------- 6 · tabla con columna principal ---------- */
.ux-tabla td[data-principal] { background: var(--color-destacado-suave); font-weight: var(--v4-peso-semi); }
.ux-tabla th[data-principal] { color: var(--color-tinta); }
.ux-tabla td[data-secundaria] { color: var(--color-tenue); }
.ux-fila-secundaria { display: block; font-size: var(--v4-texto-xs); color: var(--color-tenue); }

/* ---------- 8 · lo técnico al pie ---------- */
.ux-sistema { border-top: 1px solid var(--v4-borde-suave); padding-top: 8px; font-size: var(--v4-texto-xs); color: var(--color-tenue); }
.ux-sistema > summary { cursor: pointer; list-style: revert; }
.ux-sistema > summary:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.ux-sistema[data-frena] { border: 1px solid var(--color-alarma); border-radius: var(--v4-radio-m); background: var(--color-alarma-suave); padding: 8px 12px; color: var(--color-tinta); }
.ux-sistema-detalle { margin-top: 8px; }

.ux-tabla-responsive{container-type:inline-size}
@container (max-width:760px){
  .ux-tabla.ux-tabla-responsive table{min-width:0!important;width:100%!important;table-layout:auto!important}
  .ux-tabla.ux-tabla-responsive thead{display:none}
  .ux-tabla.ux-tabla-responsive tbody tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:8px 0;padding:12px;border:1px solid var(--color-borde);border-radius:8px}
  .ux-tabla.ux-tabla-responsive tbody td{display:block;min-width:0;width:auto!important;border:0;padding:0!important;text-align:left!important;overflow-wrap:anywhere}
  .ux-tabla.ux-tabla-responsive tbody td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:11px;font-weight:600;color:var(--color-tenue)}
  .ux-tabla.ux-tabla-responsive tbody td[data-num]{white-space:nowrap}
  .ux-tabla.ux-tabla-responsive tbody td small{white-space:normal;overflow-wrap:anywhere}
  .ux-tabla.ux-tabla-responsive tbody td[data-label="Qué hacer"]{grid-column:1/-1}
}

.ux-nacho_pantalla__a_Ujm { min-width: 0; max-width: 100%; }
.ux-nacho_pantalla__a_Ujm .n-tabla-caja { min-width: 0; max-width: 100%; }
.ux-nacho_estado__Vr3_l { display: inline-flex; align-items: center; gap: var(--v4-espacio-1, 4px); border: 1px solid currentColor; border-radius: var(--v4-radio-pastilla, 999px); padding: 3px 8px; font-size: var(--v4-texto-xs, 12px); color: var(--color-tenue); }
.ux-nacho_estado__Vr3_l[data-estado='ganando'] { color: var(--color-favorable); background: color-mix(in srgb, var(--color-favorable) 10%, var(--color-superficie)); }
.ux-nacho_estado__Vr3_l[data-estado='perdiendo'] { color: var(--color-alarma); background: color-mix(in srgb, var(--color-alarma) 10%, var(--color-superficie)); }
.ux-nacho_estado__Vr3_l[data-estado='compartiendo'] { color: var(--color-aviso); background: color-mix(in srgb, var(--color-aviso) 10%, var(--color-superficie)); }
.ux-nacho_acciones__8C_Cz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v4-espacio-2, 8px); margin-top: var(--v4-espacio-2, 8px); }
.ux-nacho_accion__JAn2U { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 12px; border-radius: var(--v4-radio-s, 6px); background: var(--color-acento); color: var(--color-primary-foreground); font-weight: var(--v4-peso-semi, 600); }
.ux-nacho_vigilancia__YSVIf table[aria-label='Productos vigilados'] > thead th:nth-child(n + 4), .ux-nacho_vigilancia__YSVIf table[aria-label='Productos vigilados'] > tbody > tr[data-fila] > td:nth-child(n + 4) { display: none; }
.ux-nacho_pantalla__a_Ujm table[aria-label='Buy box por publicación de catálogo'] > thead th:last-child, .ux-nacho_pantalla__a_Ujm table[aria-label='Buy box por publicación de catálogo'] > tbody > tr[data-fila] > td[data-label='Lectura'] { display: none; }
.ux-nacho_accion__JAn2U:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }
@media (max-width: 600px) { .ux-nacho_pantalla__a_Ujm .n-tabla { min-width: 0; } .ux-nacho_pantalla__a_Ujm .n-celda-contenido { min-width: 0; overflow-wrap: anywhere; } }