/* Difusiones, pantalla (fase 4): la hoja de estilos del módulo.

   Se carga SOLO si `/api/rutas` declara que el proceso vivo tiene el módulo (ver `DINAMICAS` en index.html): con la
   bandera apagada no sale ni esta hoja ni `js/difusiones.js`, y el panel es el de hoy.

   Lenguaje: el de la maqueta aprobada por Dirección (2026-10-03) traducido a los tokens del panel. Nada de color, radio
   ni tamaño de letra «a ojo»: lo que existe como token del panel (`--ink`, `--line`, `--good`…, `--t-*`, `--r-*`) se usa;
   con la identidad v2 encendida, sus tokens `--id-*` ganan (con el token del panel como respaldo, de modo que la misma
   hoja sirve con la identidad apagada). El estado de un sello viaja siempre en tres canales: color, glifo y texto. */

#pane-difusiones .dif { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-size: var(--t-sm); }
#pane-difusiones .dif [hidden] { display: none !important; }

/* ---- piezas sueltas ------------------------------------------------------------------------------------------------- */
#pane-difusiones .dif-card { background: var(--id-tarjeta, var(--surface)); border: 1px solid var(--line);
  border-radius: var(--id-r-tarjeta, var(--r-card)); padding: 12px 16px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html[data-identidad="v2"] #pane-difusiones .dif-card { border: 0; }
#pane-difusiones .dif-eti { font-size: var(--t-over); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--id-texto-3, var(--muted)); }
#pane-difusiones .dif-mono { font-family: var(--id-font-mono, var(--yc-font-mono, ui-monospace, monospace)); font-size: var(--t-over); }
#pane-difusiones .dif-num { font-variant-numeric: tabular-nums; font-weight: 800; }
#pane-difusiones .dif-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#pane-difusiones .dif-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#pane-difusiones .dif-sub { color: var(--id-texto-2, var(--ink-2)); font-size: var(--t-cap); }
#pane-difusiones .dif-mut { color: var(--id-texto-2, var(--muted)); }
#pane-difusiones .dif-glifo { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
#pane-difusiones .dif-glifo.mini { width: 14px; height: 14px; }

/* sellos de estado: el `badge` del panel, en la forma de sello de la identidad v2 (24 px, radio 12, glifo propio) */
html[data-identidad="v2"] #pane-difusiones .badge { min-height: 24px; padding: 0 10px 0 7px; border: 0; border-radius: var(--id-r-sello, 13px);
  font-size: 11.5px; font-weight: 700; line-height: 1.2; }
html[data-identidad="v2"] #pane-difusiones .badge.b-gray { background: var(--id-por-acreditar-bg); color: var(--id-por-acreditar-fg); }
html[data-identidad="v2"] #pane-difusiones .badge.b-info { background: var(--id-por-acreditar-bg); color: var(--id-por-acreditar-fg); }
html[data-identidad="v2"] #pane-difusiones .badge.b-good { background: var(--id-acreditado-bg); color: var(--id-acreditado-fg); }
html[data-identidad="v2"] #pane-difusiones .badge.b-warn { background: var(--id-revision-bg); color: var(--id-revision-fg); }
html[data-identidad="v2"] #pane-difusiones .badge.b-crit { background: var(--id-disputado-bg); color: var(--id-disputado-fg); }
#pane-difusiones .dif-ensayo { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-size: var(--t-over); font-weight: 700; flex: none; }

/* ---- botones ----------------------------------------------------------------------------------------------------------- */
#pane-difusiones .dif-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none; }
#pane-difusiones .dif-btn:hover:not([aria-disabled="true"]) { border-color: var(--ring); }
#pane-difusiones .dif-btn.pri { background: var(--id-acento, var(--good-bg)); color: var(--id-acento-ink, var(--good)); border-color: transparent; font-weight: 800; }
#pane-difusiones .dif-btn.pel { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
#pane-difusiones .dif-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); border-color: transparent; cursor: not-allowed; }
#pane-difusiones .dif-btn.chico { min-height: 28px; padding: 0 12px; font-size: var(--t-cap); }
#pane-difusiones .dif-btn.fantasma { background: transparent; border: 1.5px dashed var(--muted); color: var(--ink-2); cursor: default; font-weight: 600; }
#pane-difusiones :is(.dif-btn, .dif-chip, .dif-selector, .dif-buscar, .dif-sel):focus-visible,
.dif-capa :is(.dif-btn, input, textarea, button):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- la franja de campaña ------------------------------------------------------------------------------------------------ */
#pane-difusiones .dif-franja { gap: 8px; padding: 10px 16px; }
#pane-difusiones .dif-selector { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; max-width: 320px;
  border: 0; border-radius: var(--r-pill); background: var(--id-fondo, var(--surface-2)); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
#pane-difusiones .dif-dato b { font-weight: 700; color: var(--ink); }
#pane-difusiones .dif-botonera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
#pane-difusiones .dif-motivos { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; font-size: var(--t-cap); color: var(--ink-2); }
#pane-difusiones .dif-motivos .dif-glifo { vertical-align: -3px; margin-right: 4px; }
#pane-difusiones .dif-alarmas { display: flex; flex-direction: column; gap: 6px; }
#pane-difusiones .dif-alarma { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; }
#pane-difusiones .dif-alarma.es-warn { background: var(--id-revision-bg, var(--warn-bg)); color: var(--id-revision-fg, var(--warn)); }
#pane-difusiones .dif-alarma.es-crit { background: var(--id-disputado-bg, var(--crit-bg)); color: var(--id-disputado-fg, var(--crit)); }
#pane-difusiones .dif-alarma b { font-size: var(--t-body); }
#pane-difusiones .dif-alarma .desde { font-size: var(--t-cap); font-weight: 700; }
#pane-difusiones .dif-cifras { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; font-size: var(--t-cap); }
#pane-difusiones .dif-cifra { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
#pane-difusiones .dif-cifra b { font-size: var(--t-body); color: var(--ink); }
#pane-difusiones .dif-cifra.es-crit, #pane-difusiones .dif-cifra.es-crit b { color: var(--id-disputado-fg, var(--crit)); }
#pane-difusiones .dif-cifra.es-good, #pane-difusiones .dif-cifra.es-good b { color: var(--id-acreditado-fg, var(--good)); }
#pane-difusiones .dif-avanzado { font-size: var(--t-cap); color: var(--ink-2); }
#pane-difusiones .dif-avanzado summary { cursor: pointer; width: max-content; }
#pane-difusiones .dif-avanzado dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 6px 0 0; }

/* ---- barra de la tabla: buscar, filtros puestos, limpiar -------------------------------------------------------------------- */
#pane-difusiones .dif-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#pane-difusiones .dif-buscar { flex: 1 1 220px; min-width: 160px; max-width: 460px; min-height: 36px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-sm); }
html[data-identidad="v2"] #pane-difusiones .dif-buscar { border: 0; }
#pane-difusiones .dif-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--t-cap); font-weight: 600; cursor: pointer; white-space: nowrap; }
#pane-difusiones .dif-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 700; }
#pane-difusiones .dif-chip.puesto { background: var(--id-acento-suave, var(--info-bg)); font-weight: 700; }
#pane-difusiones .dif-chip.info { background: transparent; outline: 1.5px dashed var(--muted); outline-offset: -1.5px; color: var(--ink-2); cursor: default; }
#pane-difusiones .dif-chip .n { font-variant-numeric: tabular-nums; }
#pane-difusiones .dif-limpiar { background: var(--ink); color: var(--surface); }
#pane-difusiones .dif-bloque-tabla { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#pane-difusiones .tablewrap { background: var(--id-tarjeta, var(--surface)); }
html[data-identidad="v2"] #pane-difusiones .tablewrap { border: 0; border-radius: var(--id-r-tarjeta, 14px); box-shadow: none; }
#pane-difusiones .tablewrap table { min-width: 0; }
html[data-identidad="v2"] #pane-difusiones table thead th { background: var(--id-tarjeta); border-bottom: 1px solid var(--id-linea-cab, var(--line)); border-right: 0;
  font-size: var(--t-over); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--id-texto-3); }
html[data-identidad="v2"] #pane-difusiones table tbody td { border-bottom: 1px solid var(--id-linea-fila, var(--line)); border-right: 0; }
html[data-identidad="v2"] #pane-difusiones table tbody tr:hover { background: var(--id-fila-hover, var(--surface-2)); }
#pane-difusiones tbody tr.dif-click { cursor: pointer; }
#pane-difusiones td.dif-n, #pane-difusiones th.dif-n { text-align: right; }
#pane-difusiones td .dif-mut { white-space: normal; }
#pane-difusiones td a.dif-tx { text-decoration: none; }
#pane-difusiones td a.dif-tx:hover { text-decoration: underline; }
#pane-difusiones .dif-card > .badge { align-self: flex-start; }
#pane-difusiones td .dif-celda { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#pane-difusiones td .dif-celda .l1 { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
#pane-difusiones .dif-pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-cap); color: var(--id-texto-2, var(--ink-2)); }
#pane-difusiones .dif-pie .dif-btn { min-height: 32px; padding: 0 14px; }
#pane-difusiones .dif-sel { min-height: 32px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--t-cap); }
#pane-difusiones .dif-ang-ico { color: var(--muted); vertical-align: -2px; margin-left: 4px; }

/* ---- desglose por motivo (Excluidos) ---------------------------------------------------------------------------------------- */
#pane-difusiones .dif-barras { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-2); }
#pane-difusiones .dif-barras > span { display: block; min-width: 3px; background: var(--id-disputado-ico, var(--crit)); }
#pane-difusiones .dif-barras > span:nth-child(2n) { opacity: .72; }
#pane-difusiones .dif-barras > span:nth-child(3n) { opacity: .5; }
#pane-difusiones .dif-barras > span:nth-child(5n) { opacity: .34; }
#pane-difusiones .dif-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---- Envío --------------------------------------------------------------------------------------------------------------------- */
#pane-difusiones .dif-envio { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
#pane-difusiones .dif-envio > .col-izq { flex: 1 1 380px; max-width: 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#pane-difusiones .dif-envio > .col-der { flex: 2 1 420px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#pane-difusiones .dif-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#pane-difusiones .dif-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--id-tarjeta-2, var(--surface-2)); }
#pane-difusiones .dif-kpi .v { font-size: var(--t-h3); font-weight: 800; font-variant-numeric: tabular-nums; }
#pane-difusiones .dif-kpi .v.sin { font-size: var(--t-sm); color: var(--muted); }
#pane-difusiones .dif-kpi.es-crit .v { color: var(--id-disputado-fg, var(--crit)); }
#pane-difusiones .dif-viejo .dif-kpis { opacity: .55; }
#pane-difusiones .dif-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 14px; }
#pane-difusiones .dif-aviso.es-warn { background: var(--id-revision-bg, var(--warn-bg)); color: var(--id-revision-fg, var(--warn)); }
#pane-difusiones .dif-aviso.es-crit { background: var(--id-disputado-bg, var(--crit-bg)); color: var(--id-disputado-fg, var(--crit)); }
#pane-difusiones .dif-aviso.es-info { background: var(--id-por-acreditar-bg, var(--surface-2)); color: var(--id-por-acreditar-fg, var(--ink)); }
#pane-difusiones .dif-motivo-fila { display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 8px; align-items: center; }
#pane-difusiones .dif-motivo-fila .barra { height: 6px; border-radius: 3px; background: var(--muted); opacity: .45; }

/* ---- Mensaje ---------------------------------------------------------------------------------------------------------------------- */
#pane-difusiones .dif-msj { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
#pane-difusiones .dif-msj > .dif-card { flex: 1 1 360px; }
#pane-difusiones .dif-burbuja { background: var(--id-por-acreditar-bg, var(--surface-2)); border-radius: 14px; padding: 12px 14px; max-width: 520px;
  display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
#pane-difusiones .dif-burbuja .enc { font-weight: 800; }
#pane-difusiones .dif-burbuja .pie { font-size: var(--t-cap); color: var(--ink-2); }
#pane-difusiones .dif-burbuja .boton { margin-top: 4px; padding: 6px 10px; border-radius: 10px; background: var(--surface); text-align: center; font-weight: 700; }
#pane-difusiones .dif-var { font-family: var(--id-font-mono, var(--yc-font-mono, monospace)); font-size: var(--t-over); background: var(--surface);
  border-radius: 6px; padding: 1px 6px; }

/* ---- diálogos (aprobar, cancelar, confirmar) ------------------------------------------------------------------------------------ */
.dif-capa { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dif-caja { background: var(--surface); color: var(--ink); border-radius: var(--r-card); width: 100%; max-width: 640px; max-height: calc(100vh - 32px);
  overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; font-size: var(--t-sm); }
.dif-caja [hidden] { display: none !important; }
.dif-caja h3 { margin: 0; font-size: var(--t-h2); font-weight: 800; }
.dif-caja .sub { color: var(--ink-2); font-size: var(--t-cap); }
.dif-caja .dif-eti { font-size: var(--t-over); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dif-caja .bloque { display: flex; flex-direction: column; gap: 6px; }
.dif-caja .item { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.dif-caja .item svg { flex: none; margin-top: 2px; }
.dif-caja .dif-glifo { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dif-caja .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dif-caja .tres > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.dif-caja .tres .v { font-size: var(--t-h3); font-weight: 800; font-variant-numeric: tabular-nums; }
.dif-caja .dif-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dif-caja .dif-sub { color: var(--ink-2); font-size: var(--t-cap); }
.dif-caja .dif-mut { color: var(--muted); }
.dif-caja .dif-btn.chico { min-height: 28px; padding: 0 12px; font-size: var(--t-cap); }
.dif-caja .dif-mono { font-family: var(--id-font-mono, var(--yc-font-mono, monospace)); font-size: var(--t-over); }
.dif-caja .pie { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dif-caja .campo { display: flex; flex-direction: column; gap: 4px; }
.dif-caja .campo .fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dif-caja textarea, .dif-caja input.dif-in { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 8px 10px; resize: vertical; min-height: 40px; }
.dif-caja [aria-invalid="true"] { border-color: var(--crit); }
.dif-caja .err { display: flex; gap: 6px; align-items: center; color: var(--crit); font-size: var(--t-cap); font-weight: 700; }
.dif-caja .dif-aviso { display: flex; gap: 10px; padding: 10px 14px; border-radius: 12px; }
.dif-caja .dif-aviso.es-crit { background: var(--crit-bg); color: var(--crit); }
.dif-caja .dif-aviso.es-good { background: var(--good-bg); color: var(--good); }
.dif-caja .dif-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.dif-caja .dif-btn.pri { background: var(--id-acento, var(--good-bg)); color: var(--id-acento-ink, var(--good)); border-color: transparent; font-weight: 800; }
.dif-caja .dif-btn.pel { background: var(--crit-bg); color: var(--crit); border-color: transparent; }
.dif-caja .dif-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); border-color: transparent; cursor: not-allowed; }

/* ---- el menú que abre el selector de campaña ------------------------------------------------------------------------------------ */
.dif-menu { position: absolute; z-index: 60; min-width: 320px; max-width: min(520px, 92vw); max-height: 320px; overflow: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: var(--sombra-flotante); display: flex; flex-direction: column; gap: 2px; }
.dif-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.dif-menu button:hover, .dif-menu button[aria-current="true"] { background: var(--surface-2); }
.dif-menu button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* ---- el menú lateral con la identidad apagada: el padre y sus pantallas, planos ------------------------------------------------- */
.sidebar .dif-sub-nav { display: flex; align-items: center; min-height: 30px; padding: 0 10px 0 34px; border-radius: var(--r-ctrl);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-decoration: none; }
.sidebar .dif-sub-nav:hover { background: var(--surface-2); color: var(--ink); }
.sidebar .dif-sub-nav.active { background: var(--info-bg); color: var(--info); }
.sidebar .dif-sub-nav:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.sidebar.collapsed .dif-sub-nav { display: none; }

/* ---- orden por encabezado y filtro por fecha (fase 6) ------------------------------------------------------------------------- */
#pane-difusiones th.orden { cursor: default; }
#pane-difusiones .dif-th-orden { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: inherit; }
#pane-difusiones .dif-th-orden:hover { text-decoration: underline; text-underline-offset: 3px; }
#pane-difusiones .dif-th-orden[data-orden-estado="asc"], #pane-difusiones .dif-th-orden[data-orden-estado="desc"] { color: var(--ink); }
#pane-difusiones .dif-th-orden:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-ctrl); }
#pane-difusiones .dif-ord-ico { flex: none; }
#pane-difusiones .dif-fechas { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pane-difusiones .dif-fecha { display: inline-flex; align-items: center; gap: 6px; }
#pane-difusiones .dif-fecha-in { width: 9.5rem; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-family: var(--id-font-mono, var(--yc-font-mono, ui-monospace, monospace)); font-size: var(--t-cap); box-sizing: border-box; }
#pane-difusiones .dif-fecha-in[aria-invalid="true"] { border-color: var(--crit); border-width: 2px; }
#pane-difusiones .dif-fecha-in:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#pane-difusiones .dif-fechas-err, .dif-caja .err { display: flex; gap: 6px; align-items: center; color: var(--crit); font-size: var(--t-cap); font-weight: 700; }
#pane-difusiones .dif-fechas-err[hidden] { display: none; }
#pane-difusiones .dif-crece, .dif-caja .dif-crece { flex-grow: 1; }

/* ---- Envío por cliente ------------------------------------------------------------------------------------------------------------ */
#pane-difusiones .dif-envio-clientes { gap: 10px; }
#pane-difusiones .dif-envio-clientes.dif-viejo [data-zona="clientes"] tbody { opacity: .6; }
#pane-difusiones .dif-titulo-bloque { font-size: var(--t-body); font-weight: 800; }
#pane-difusiones .dif-eti-grupo { min-width: 8rem; }
#pane-difusiones .dif-chip[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
#pane-difusiones [data-zona="chips-envio"] { gap: 6px; }

/* ---- «Campaña creada» --------------------------------------------------------------------------------------------------------------- */
#pane-difusiones .dif-creada { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
#pane-difusiones .dif-aviso.es-good { background: var(--id-acreditado-bg, var(--good-bg)); color: var(--id-acreditado-fg, var(--good)); }
#pane-difusiones .dif-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
#pane-difusiones .dif-pasos li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; }
#pane-difusiones .dif-pasos li .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); font-size: var(--t-cap); font-weight: 800; }
#pane-difusiones .dif-pasos li.hecho .n { background: var(--id-acreditado-bg, var(--good-bg)); color: var(--id-acreditado-fg, var(--good)); }
#pane-difusiones .dif-pasos li.ahora { color: var(--ink); font-weight: 800; }
#pane-difusiones .dif-pasos li.ahora .n { background: var(--id-acento, var(--good-bg)); color: var(--id-acento-ink, var(--good)); }

/* ---- «Nueva campaña»: el panel lateral (a la derecha, a toda la altura; sin animación: no mueve nada hasta que se pulsa Crear) ------- */
.dif-capa.lateral { justify-content: flex-end; align-items: stretch; padding: 0; }
.dif-caja.lateral { max-width: 34rem; height: 100%; max-height: none; border-radius: var(--r-card) 0 0 var(--r-card); box-shadow: var(--sombra-flotante); }
.dif-caja .dif-nueva-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--id-acento, var(--good-bg)); color: var(--id-acento-ink, var(--good)); }
.dif-caja .dif-nueva-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.dif-caja .dif-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dif-caja .dif-campo > label, .dif-caja .dif-etq { font-size: var(--t-cap); font-weight: 700; }
.dif-caja .dif-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dif-caja .dif-in { width: 100%; box-sizing: border-box; min-height: 38px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; }
.dif-caja .dif-in-mono { font-family: var(--id-font-mono, var(--yc-font-mono, ui-monospace, monospace)); font-size: var(--t-cap); font-weight: 500; }
.dif-caja .dif-in[aria-invalid="true"] { border-color: var(--crit); border-width: 2px; }
.dif-caja .dif-in:disabled { background: var(--surface-2); color: var(--muted); }
.dif-caja input.dif-in.dif-in-dia { width: 10.5rem; }
.dif-caja input.dif-in.dif-in-hora { width: 6.5rem; }
.dif-caja .dif-nowrap { flex-wrap: nowrap; align-items: center; }
.dif-caja .dif-nowrap > input.dif-in { flex: 1 1 auto; min-width: 0; width: auto; }
.dif-caja.lateral .pie { position: sticky; bottom: -1.25rem; background: var(--surface); padding: 10px 0; }
.dif-caja .dif-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-ctrl);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.dif-caja .dif-opt.on { border-color: var(--ink); border-width: 2px; background: var(--id-acento-suave, var(--info-bg)); }
.dif-caja .dif-opt[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.dif-caja .dif-opt:focus-visible, .dif-caja .dif-in:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.dif-caja .dif-ensayo-nota { font-weight: 700; color: var(--warn); }
.dif-caja .dif-estado-hora { display: inline-flex; align-items: center; gap: 6px; color: var(--good); font-size: var(--t-cap); font-weight: 700; }
.dif-caja .dif-nueva-409 { display: flex; flex-direction: column; gap: 4px; }
.dif-caja .dif-enlace-409 { font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.dif-caja .dif-aviso.es-info { background: var(--surface-2); color: var(--ink); }
.dif-caja .dif-ayuda-pl { display: flex; gap: 6px; }

@media (max-width: 1100px) {
  #pane-difusiones .dif-botonera { margin-left: 0; }
  #pane-difusiones .dif-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { #pane-difusiones *, .dif-capa * { transition: none !important; animation: none !important; } }

/* ---- el tercer tipo, «Aviso de exención vencida» (v2.12): situaciones, plantillas por situación, «solo ensayo» ------------------------- */
#pane-difusiones .dif-situaciones { align-items: center; padding-top: 2px; }
#pane-difusiones a.dif-chip { text-decoration: none; }
#pane-difusiones .dif-plantillas-franja { display: flex; flex-direction: column; gap: 6px; }
#pane-difusiones .dif-pl-fila { gap: 8px; }
#pane-difusiones .dif-extra { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dif-caja .dif-solo-ensayo { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-size: var(--t-over); font-weight: 700; }
.dif-caja .dif-plantillas-sit { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dif-caja .dif-plantillas-sit .dif-fila { gap: 8px; }

/* ---- Envíos por corrida (solo lectura; Dirección, 2026-10-08) ------------------------------------------------------------------ */
#pane-difusiones .dif-kpis.dif-kpis-envios { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#pane-difusiones .dif-viejo .dif-kpis.dif-kpis-envios { opacity: .55; }
#pane-difusiones tr.dif-rota > td { background: var(--id-revision-bg, var(--warn-bg)); }
#pane-difusiones [data-tabla="difusiones.envios-corrida"] td.dif-n, #pane-difusiones [data-tabla="difusiones.envios-corrida"] th.dif-n { font-variant-numeric: tabular-nums; }
/* Diez columnas caben en 1280 sin barra horizontal: los encabezados de cifra pueden partirse en dos líneas */
#pane-difusiones [data-tabla="difusiones.envios-corrida"] thead th.dif-n { white-space: normal; line-height: 1.15; }
#pane-difusiones [data-tabla="difusiones.envios-corrida"] :is(th, td) { padding-left: var(--s-2, 8px); padding-right: var(--s-2, 8px); }
#pane-difusiones [data-tabla="difusiones.envios-corrida"] td[data-campo="plantilla"] .dif-tx { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }