/* styles/vista-nueva.css — LA «VISTA NUEVA» DE LA COLA (fase 2, bloque 1, 2026-10-12).
 *
 * Inter y JetBrains Mono servidas por el Hub (assets/fonts, SIL OFL 1.1, ver sus
 * LICENSE). Se aplican SÓLO dentro de .vista-nueva: la vista actual queda igual.
 * El navegador baja una fuente recién cuando algo la usa, así que quien no abre
 * la vista nueva no la descarga.
 * Colores: sólo tokens (styles/main.css y tema-claro.css). */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.vista-nueva { font-family: 'Inter Variable', Inter, system-ui, sans-serif; font-size: 13px; }
/* Mono SÓLO para identificadores, direcciones, hashes y montos. */
.vista-nueva .vn-mono { font-family: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.vista-nueva .vn-aviso { margin: 0 0 10px; font-size: 12.5px; color: var(--txt2); }
.vista-nueva .vn-estado { padding: 14px 16px; border: 1px solid var(--dark4); border-radius: 8px; color: var(--txt2); }
.vista-nueva .vn-estado[role="alert"] { border-color: var(--red); color: var(--light); }
.vista-nueva .vn-estado .btn { margin-left: 8px; }
.vista-nueva .vn-grilla .ag-row { cursor: pointer; }
/* El chip de severidad dentro de la celda: centrado, de su alto, sin el margen del detalle. */
.vista-nueva .vn-grilla .ag-cell { display: flex; align-items: center; }
.vista-nueva .vn-grilla .adp-level-badge { margin-bottom: 0; line-height: 1.4; }

#vista-nueva-btn.active { border-color: var(--orange); color: var(--orange); }

/* ── Bloque 2 (2026-10-13): las colas en el menú, los contadores del servidor ── */
.sidebar-sub { margin: 2px 0 6px 38px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-sub[hidden] { display: none; }
.sidebar-sub .vn-sub-plegar, .sidebar-sub .vn-sub-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0;
  border-left: 2px solid transparent; border-radius: 6px; padding: 6px 10px; color: var(--txt2); font: inherit; font-size: 13px; cursor: pointer;
}
.sidebar-sub .vn-sub-plegar { font-size: 11.5px; color: var(--gray); padding: 4px 10px; }
.sidebar-sub .vn-sub-item:hover, .sidebar-sub .vn-sub-plegar:hover { background: var(--dark3); color: var(--light); }
.sidebar-sub .vn-sub-item.active { color: var(--orange); border-left-color: var(--orange); background: var(--dark3); }
.sidebar-sub .vn-sub-n { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.sidebar-sub .vn-sub-sd { color: var(--gray); font-weight: 400; }
.sidebar-sub .vn-chevron { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 3px 3px 0; }
.sidebar-sub .vn-sub-plegar[aria-expanded="false"] .vn-chevron { transform: rotate(-45deg); margin: 0 3px 0 0; }
.sidebar-sub #vn-sub-colas[hidden] { display: none; }

.vn-kpi .vn-kpi-grupo { color: var(--gray); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.vn-contado { font-size: 11.5px; color: var(--gray); margin: -6px 0 12px; }
/* Las pestañas de la cola Cripto (2026-10-20, 4.2.104): por tipo de alerta, con sus abiertas. */
.vn-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--dark4); margin: 0 0 10px; flex-wrap: wrap; }
.vn-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; color: var(--txt2); font: inherit; font-size: 13px; cursor: pointer; }
.vn-tab:hover, .vn-tab:focus-visible { color: var(--light); }
.vn-tab.active { color: var(--light); border-bottom-color: var(--orange); font-weight: 600; }
.vn-tab-n { margin-left: 6px; font-size: 11.5px; color: var(--gray); background: var(--dark3); border-radius: 9px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.vn-aviso-cruzado { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 12px;
  border: 1px solid var(--gate-review); border-radius: 8px; font-size: 13px; color: var(--light); }

/* ── Bloque 3 (2026-10-13): la tabla de la cola, seis columnas de dos líneas ── */
.vista-nueva .vn-celda { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; width: 100%; line-height: 1.3; }
.vista-nueva .vn-l1, .vista-nueva .vn-l2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-nueva .vn-l2 { font-size: 12px; color: var(--txt2); }
.vista-nueva .vn-l2:empty { display: none; }
.vista-nueva .vn-motivo { color: var(--light); font-weight: 600; font-size: 12.5px; }
.vista-nueva .vn-falta, .vista-nueva .vn-gris { color: var(--gray); }
/* Un dato por columna (2026-10-20, 4.2.104): una línea, con puntos suspensivos si no entra. */
.vista-nueva .vn-celda-una { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.vista-nueva .vn-chips { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; line-height: 18px; }
.vista-nueva .vn-chips .vn-chip { margin-left: 0; flex: none; }
.vista-nueva .vn-na { color: var(--gray); }
.vista-nueva .vn-marca { font-size: 11.5px; color: var(--gray); margin-left: 4px; }
.vista-nueva .adp-level-badge .ph { width: 14px; height: 14px; vertical-align: -2px; }
.vn-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 7px; margin-left: 4px; border-radius: 5px; border: 1px solid var(--dark4); line-height: 18px; color: var(--txt2); }
.vn-chip--bloq { color: var(--gate-blocked); border-color: var(--gate-blocked); }
.vn-chip--rev { color: var(--gate-review); border-color: var(--gate-review); }
.vista-nueva .vn-visual-columnas { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--dark4); padding-top: 8px; margin-top: 4px; }
.vista-nueva .vn-visual-titulo { font-size: 11.5px; color: var(--gray); font-weight: 600; }
.vista-nueva .vn-visual-nota { font-size: 11.5px; color: var(--gray); }
.vista-nueva .vn-parcial { color: var(--gate-review); font-weight: 600; }
.vista-nueva .vn-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; color: var(--txt2); }
.vista-nueva .vn-barra .vn-sel { color: var(--light); margin-left: 8px; }
.vista-nueva .vn-visual { margin-left: auto; position: relative; }
.vista-nueva .vn-visual > summary { cursor: pointer; list-style: none; padding: 4px 10px; border: 1px solid var(--dark4); border-radius: 6px; color: var(--light); }
.vista-nueva .vn-visual > summary::-webkit-details-marker { display: none; }
.vista-nueva .vn-visual-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 6px;
  min-width: 220px; padding: 10px 12px; background: var(--dark2); border: 1px solid var(--dark4); border-radius: 8px; }
.vista-nueva .vn-grilla .ag-header-cell-text { white-space: normal; }
/* La celda limita el ancho de lo que pinta el renderer: sin esto, el texto largo se
   mete en la columna de al lado en vez de cortarse con «…» (el completo, en el title). */
.vista-nueva .vn-grilla .ag-cell { overflow: hidden; }
.vista-nueva .vn-grilla .ag-cell-value, .vista-nueva .vn-grilla .ag-cell-wrapper { min-width: 0; max-width: 100%; overflow: hidden; flex: 1 1 auto; }

/* ── Bloque 4 (2026-10-13): el detalle de la alerta en la vista nueva ── */
#alert-detail-panel.vn-detalle { font-family: 'Inter Variable', Inter, system-ui, sans-serif; display: flex; flex-direction: column; }
#alert-detail-panel.vn-detalle .adp-icon-strip { display: none; }
#alert-detail-panel.vn-detalle .adp-body { display: block; overflow-y: auto; flex: 1 1 auto; }
#alert-detail-panel.vn-detalle .adp-content { overflow: visible; }
.vn-dnav { display: flex; gap: 6px; align-items: flex-start; margin-left: auto; margin-right: 8px; position: relative; flex: none; }
.vn-dnav > .btn { white-space: nowrap; }
.vn-dnav[hidden], .vn-dtabs[hidden], .vn-resumen[hidden] { display: none; }
/* flex-shrink 0: con un detalle largo, la columna del panel achicaba la fila y tapaba el texto (TG-13, 2026-10-13). */
.vn-dtabs { flex-shrink: 0; display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--dark4); overflow-x: auto; }
.vn-dtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; color: var(--txt2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.vn-dtab[aria-selected="true"] { color: var(--orange); border-bottom-color: var(--orange); font-weight: 600; }
.vn-dtab:hover { color: var(--light); }
.vn-resumen { padding: 14px 16px 0; }
.vn-bloque { border: 1px solid var(--dark4); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--dark2); }
.vn-bloque h3 { margin: 0 0 8px; font-size: 13.5px; color: var(--light); }
.vn-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.vn-kv dt { color: var(--gray); }
.vn-kv dd { margin: 0; color: var(--light); }
.vn-kv ul { margin: 0; padding-left: 18px; }
.vn-falta, .vn-gris { color: var(--gray); }
.vn-fuente { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dark4); font-size: 12.5px; color: var(--light); }
.vn-fuente--oficial { border-color: var(--blue); }
.vn-fuente--indicio { border-color: var(--gate-review); }
.vn-fuente-entidad { display: block; margin-top: 2px; }
.vn-fuente-enlace { color: var(--blue); white-space: nowrap; }
.vn-fuente-enlace:hover, .vn-fuente-enlace:focus-visible { text-decoration: underline; }
.vn-actividad { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.vn-actividad li { border-left: 2px solid var(--dark4); padding-left: 10px; }
.vn-act-2 { color: var(--txt2); white-space: pre-wrap; margin-top: 2px; }
.vn-nota { display: flex; flex-direction: column; gap: 8px; }
#adp-action-bar .vn-primario { outline: 2px solid var(--orange); outline-offset: 1px; font-weight: 700; }
.vn-bloque p, .vn-nota label { font-size: 12.5px; margin: 0 0 8px; }
.vn-nota .btn { align-self: flex-start; }

/* ── Bloque 5a (2026-10-14): los dos estados de la alerta ── */
.vn-estados-wrap { flex-shrink: 0; padding: 10px 16px 0; }
.vn-estados-wrap[hidden] { display: none; }
.vn-estados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 1px solid var(--dark4); border-radius: 10px; padding: 10px 14px; background: var(--dark2); }
.vn-estados-rot { font-size: 11.5px; color: var(--gray); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.vn-estado-valor { font-size: 13px; color: var(--light); font-weight: 600; }
.vn-estado-selector { font-size: 13px; padding: 4px 8px; max-width: 260px; }
.vn-estados-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vn-estados-col > .vn-gris { font-size: 12.5px; }
/* El chip regulatorio: fondo suave + texto + borde (manual §5). */
.vn-calif { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--dark4); color: var(--txt2); }
.vn-calif--sospechosa { color: var(--red); border-color: var(--red); }
.vn-calif--no_sospechosa { color: var(--txt2); border-color: var(--dark4); }
/* La marca de prueba (2026-10-23): punteada y en --txt2, como «PRUEBA» en la tarjeta. */
.vn-chip-prueba { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--txt2); color: var(--txt2); }
#vn-dialogo-estado, #vn-dialogo-lote, #vn-dialogo-accion, #vn-dialogo-marca { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--dark) 82%, transparent); z-index: 1400; align-items: center; justify-content: center; }
#vn-dialogo-estado.show, #vn-dialogo-lote.show, #vn-dialogo-accion.show, #vn-dialogo-marca.show { display: flex; }
.vn-lote-afuera { margin: 10px 0; font-size: 12.5px; }
.vn-lote-afuera ul { margin: 4px 0 0; padding-left: 18px; max-height: 160px; overflow-y: auto; }
.vn-lote-nota { font-size: 12px; margin-top: 4px; }
.vn-ver-est { margin-left: auto; }
.vn-filtro-est { font-size: 12.5px; color: var(--light); margin-left: 8px; }
.vn-estadisticas { padding: 4px 0 24px; }
.vn-est-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 4px; }
.vn-est-cabeza h2 { font-size: 18px; margin: 0; color: var(--light); }
.vn-est-sub { font-size: 12.5px; margin: 0 0 14px; }
.vn-est-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vn-est-tarjeta { background: var(--dark2); border: 1px solid var(--dark4); border-radius: 10px; padding: 14px 16px; }
.vn-est-tarjeta h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--light); }
.vn-est-fig { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.vn-est-cifra { background: none; border: 0; padding: 0; font-family: inherit; font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--light); cursor: pointer; text-decoration: underline; text-decoration-color: var(--dark4); }
.vn-est-cifra:hover, .vn-est-cifra:focus-visible { text-decoration-color: var(--blue); }
.vn-est-den { font-size: 12px; color: var(--gray); }
.vn-est-sd { font-size: 13px; color: var(--gray); }
.vn-est-curva { width: 100%; height: 56px; display: block; }
.vn-est-curva .base { stroke: var(--dark4); stroke-width: 1; }
.vn-est-curva .linea { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vn-est-curva .punto { fill: var(--blue); }
.vn-est-escala { font-size: 11.5px; color: var(--gray); margin-top: 4px; }
.vn-est-sinhist { font-size: 12.5px; color: var(--gray); border: 1px dashed var(--dark4); border-radius: 6px; padding: 16px 10px; text-align: center; }
.vn-pag-completa { margin-left: 4px; }
/* ── La alerta en página completa (bloque 7): el mismo panel, a ancho completo ── */
body.modo-pagina-alerta .view, body.modo-pagina-alerta #adp-backdrop { display: none !important; }
body.modo-pagina-alerta #alert-detail-panel { position: static; transform: none; transition: none; width: auto; height: auto;
  max-width: 1180px; margin: 0 auto 16px; border: 1px solid var(--dark4); border-radius: 10px; box-shadow: none; z-index: auto; }
body.modo-pagina-alerta #alert-detail-panel .panel-close[data-click="closeAlertPanel"], body.modo-pagina-alerta .vn-pag-completa, body.modo-pagina-alerta #vn-dnav { display: none !important; }
#vn-pagina-alerta, #vn-adjuntos { max-width: 1180px; margin: 0 auto 12px; }
.vn-pagina-cabeza { display: flex; align-items: center; gap: 14px; padding: 6px 0 10px; }
.vn-adjuntos { padding: 14px 16px; }
.vn-adjuntos h3 { margin: 0 0 10px; font-size: 15px; color: var(--light); }
.vn-adj-subir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; font-size: 12.5px; }
.vn-adj-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vn-adj-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.vn-adj-tabla th { text-align: left; font-weight: 600; color: var(--gray); padding: 6px 8px; border-bottom: 1px solid var(--dark4); }
.vn-adj-tabla td { padding: 8px; border-bottom: 1px solid var(--dark4); vertical-align: top; color: var(--light); }
.vn-adj-quitado td { color: var(--gray); }
.vn-adj-nota { font-size: 12px; margin-top: 2px; }
.vn-adj-acciones { white-space: nowrap; text-align: right; }
.vn-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#vn-dialogo-adjunto { display: none; position: fixed; inset: 0; background: color-mix(in srgb, var(--dark) 82%, transparent); z-index: 1400; align-items: center; justify-content: center; }
#vn-dialogo-adjunto.show { display: flex; }
.vn-lote-botones { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }
.vn-dialogo { font-family: 'Inter Variable', Inter, system-ui, sans-serif; }
.vn-dialogo .subdispatch-title { color: var(--light); }
.vn-dialogo-texto { height: 110px; }
.vn-dialogo-ayuda { font-size: 12px; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
.vn-dialogo-casilla { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--light); }
.vn-dialogo-info { font-size: 12px; margin-top: 10px; }
.vn-dialogo-aviso { font-size: 12.5px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--gate-review); border-radius: 8px; color: var(--light); }
.vn-dialogo-error { color: var(--red); font-size: 12.5px; margin-top: 8px; min-height: 1em; }
.vn-dialogo-acciones { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }

/* Las repetidas agrupadas (×N, 2026-10-16) */
.vn-xn { display: inline-block; font: inherit; font-size: 11.5px; font-weight: 700; padding: 0 7px; margin-left: 4px; border-radius: 999px;
  border: 1px solid var(--dark4); background: transparent; color: var(--txt2); cursor: pointer; line-height: 18px; }
.vn-xn:hover, .vn-xn:focus-visible { color: var(--light); border-color: var(--txt2); }
.vn-grupo { border: 1px solid var(--dark4); border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.vn-grupo-linea { margin: 2px 0; }
.vn-grupo-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.vn-xn-cerrar { position: relative; }
.vn-xn-cerrar > summary { list-style: none; }
.vn-xn-cerrar > summary::-webkit-details-marker { display: none; }
.vn-xn-cerrar-panel { display: flex; gap: 8px; margin-top: 6px; }
.vn-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; }

/* El detalle y el caso (lote del 2026-10-17, Nico). Sólo tokens de tema. */
.adp-header { padding: 14px 20px 12px; }
.adp-campos.adp-campos--fila { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 6px 0 0; }
.adp-campos--fila .adp-campo { display: contents; }
.adp-campos--fila .adp-campo-et { margin: 0; }
.adp-campos--fila .adp-campo-val { margin: 0; word-break: break-word; }
.adp-nivel-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adp-nivel-linea .adp-level-badge { margin-bottom: 6px; }
.adp-nivel-linea .vn-calif { margin-bottom: 6px; }
.vn-calif[hidden] { display: none; }
.adp-asignacion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.adp-asignacion:empty { display: none; }
.adp-asignar-a { width: auto; min-width: 160px; padding: 3px 8px; font-size: 12px; }
.vn-plazo-ros { font-size: 12px; color: var(--txt2); margin: 6px 0; display: flex; align-items: center; gap: 6px; }
.vn-falta { color: var(--gray); }
.vn-dialogo-ayuda .vn-falta { color: var(--yellow); }

/* Preparar ROS: elegir, redactar, sin borrador, pasos del agente. */
.ros-elegir, .ros-manual, .ros-sin-ia, .ros-pasos { padding: 18px 20px; color: var(--light); }
.ros-elegir-titulo { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--light); }
.ros-opcion { display: block; width: 100%; text-align: left; font: inherit; margin: 10px 0 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--dark4); background: var(--dark2); color: var(--light); cursor: pointer; }
.ros-opcion:hover, .ros-opcion:focus-visible { border-color: var(--orange); }
.ros-opcion b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.ros-opcion span { font-size: 12.5px; color: var(--txt2); }
.ros-elegir-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.ros-relato { width: 100%; height: 160px; }
.ros-sin-ia-motivo { font-size: 13px; color: var(--txt2); margin: 6px 0 4px; line-height: 1.5; }
.ros-pasos ol { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.ros-pasos li { padding: 3px 0; color: var(--gray); }
.ros-pasos li.actual { color: var(--light); font-weight: 600; }
.ros-pasos li.hecho { color: var(--txt2); }

/* El caso: resumen en filas y pasos en una línea. */
.caso-resumen { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 8px; font-size: 13px; }
.caso-resumen dt { color: var(--gray); font-weight: 500; }
.caso-resumen dd { margin: 0; color: var(--light); word-break: break-word; }
/* (2026-10-17, Nico) Sin scroll horizontal: si no entra, baja a una segunda línea; menos relleno. */
#panel-status-flow.status-flow { flex-wrap: wrap; overflow: visible; gap: 4px 2px; row-gap: 4px; }
#panel-status-flow .status-step { padding: 3px 6px; font-size: 11.5px; white-space: nowrap; cursor: default; }
#panel-status-flow .status-arrow { color: var(--gray); }
/* Dashboard: cada fila de «Alertas prioritarias» abre el detalle (P1). */
.dash-fila-alerta { cursor: pointer; }
.dash-fila-alerta:hover td, .dash-fila-alerta:focus-visible td { background: var(--dark3); }
.dash-fila-alerta:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* La guía: un paso pendiente es un botón que lleva a hacerlo (punto 11). */
button.cl-item.cl-accion { width: 100%; text-align: left; font: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--dark4);
  color: inherit; cursor: pointer; border-radius: 0; }
button.cl-item.cl-accion:hover .cl-que, button.cl-item.cl-accion:focus-visible .cl-que { color: var(--orange); }
button.cl-item.cl-accion:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.cl-ir { color: var(--orange); white-space: nowrap; }
/* Desestimar una de sanciones o FT: se dice antes de escribir (2026-10-17). */
.vn-dialogo-bloqueo { border-color: var(--red); display: flex; gap: 8px; align-items: flex-start; }
.vn-dialogo-texto:disabled { opacity: .55; cursor: not-allowed; }
/* La ventana del ROS (2026-10-17, Nico): la nota del Audit Trail, del tamaño del resto; el pie, sólo con contenido. */
.ros-elegir > .vn-gris { font-size: 12.5px; margin-top: 10px; }
#ros-pie:has(#ros-acciones:empty):has(#ros-imprimir[style*="display: none"]),
#ros-pie:has(#ros-acciones:empty):has(#ros-imprimir[style*="display:none"]) { display: none !important; }
/* El encabezado del caso, por filas (2026-10-17). */
.caso-enc-id { font-size: 16px; font-weight: 700; color: var(--light); }
.caso-enc-titulo { font-size: 14px; font-weight: 600; color: var(--light); margin-top: 2px; }
.caso-enc-datos { margin-top: 8px; font-size: 12.5px; }
.caso-enc-datos .kpi-link { font-size: 12.5px; padding: 0; }
/* La misma dirección con otro cliente final (2026-10-17): aviso informativo, sin color de severidad. */
.vn-otro-cliente { font-size: 12px; color: var(--txt2); text-decoration: underline; padding: 0; text-align: left; }
.vista-nueva .vn-l2:has(.vn-otro-cliente) { white-space: normal; overflow: visible; }
.vista-nueva .vn-otro-cliente { line-height: 1.25; display: inline; }

/* El detalle: contrapartes y atajos (2026-10-20, 4.2.104). */
.vn-contrapartes { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 14px; }
.vn-contrapartes th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--gray); border-bottom: 1px solid var(--dark4); padding: 6px 8px; }
.vn-contrapartes td { border-bottom: 1px solid var(--dark4); padding: 6px 8px; color: var(--light); vertical-align: top; }
.vn-contrapartes .vn-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-contrapartes .vn-fuente { font-size: 12px; color: var(--txt2); }
/* Flota sobre el detalle: dentro del encabezado lo apretaba (captura del 20/10). */
.vn-atajos { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 300px; padding: 10px 12px; border: 1px solid var(--dark4); border-radius: 8px; background: var(--dark2); }
.vn-atajos[hidden] { display: none; }
.vn-atajos-lista { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; color: var(--txt2); margin-bottom: 8px; }
.vn-atajos kbd { font: inherit; font-size: 11.5px; border: 1px solid var(--dark4); border-bottom-width: 2px; border-radius: 4px; padding: 0 6px; background: var(--dark3); color: var(--light); }

/* «Cerrar con acción correctiva» (2026-10-21): su botón y su diálogo, con tokens propios. */
.wf-btn.wf-accion { background: var(--accion-correctiva-fondo); color: var(--accion-correctiva-texto); border: 1px solid var(--accion-correctiva-borde); }
.wf-btn.wf-accion:hover:not([disabled]) { border-color: var(--accion-correctiva-texto); }
.wf-btn.wf-accion[disabled] { opacity: .55; cursor: not-allowed; }
/* El ⓘ que se ve (2026-10-23): el globo se abre con hover y con foco, o con clic (.abierto); Esc lo cierra. */
.globo-ayuda { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.globo-ayuda-i { display: inline-flex; align-items: center; padding: 2px; border: 0; border-radius: 4px; background: none; color: var(--txt2); cursor: help; font: inherit; }
.globo-ayuda-i:focus-visible { outline: 1px dotted var(--txt2); outline-offset: 2px; }
.globo-ayuda-texto { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; width: max-content; max-width: 320px;
  padding: 8px 10px; border: 1px solid var(--dark4); border-radius: 6px; background: var(--dark2); color: var(--light);
  font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: normal; }
.globo-ayuda:hover .globo-ayuda-texto, .globo-ayuda:focus-within .globo-ayuda-texto, .globo-ayuda.abierto .globo-ayuda-texto { display: block; }
.globo-ayuda.esc .globo-ayuda-texto { display: none; }
/* El bloque de medidas: en el diálogo de la alerta y en el cierre del caso (#close-case-modal). */
.vn-medidas { max-height: 380px; overflow: auto; padding-right: 4px; margin: 4px 0 10px; }
.vn-medida { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 13px; line-height: 1.4; }
.vn-medida b { font-weight: 600; color: var(--light); }
.vn-medida-nota { font-size: 12px; color: var(--txt2); }
.vn-medida-vigente { font-size: 12px; color: var(--accion-correctiva-texto); }
.vn-medida-desc { margin: 4px 0 0 24px; width: calc(100% - 24px); min-height: 48px; }
.vn-medida-aviso { font-size: 12px; color: var(--txt2); }
#close-case-modal .subdispatch-option > span { flex: 1 1 0; min-width: 0; }