/* ==========================================================================
   LeadSync — PANTALLA DE DIFUSIONES (envío masivo, orden B123)
   ========================================================================== */

.dif-panel {
  /* Sin relleno propio: la cabecera de la sección ya lo pone, y con él la tabla quedaba
     metida 16 px respecto al título. */
  padding: 0;
}
.dif-panel--entra { animation: difEntra 180ms ease-out; }
/* Cuándo fue la última emisión, bajo su estado. */
.dif-estado-cuando {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-dim);
}

@keyframes difEntra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes difGira {
  to { transform: rotate(360deg); }
}

/* A la izquierda, alineado con el título y la tabla. En Mensajes rápidos «Nuevo» va a la
   derecha porque cierra la fila del buscador; aquí no hay buscador. */
.dif-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dif-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dif-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.dif-subtitulo {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* Estado vacío */
.dif-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 12px;
  gap: 12px;
}

/* El icono a 40 px y en el color de acento, como el estado vacío del asistente: a su tamaño por
   defecto (el de `.ic`) parecía una mancha (lo señaló él el 06-10). */
.dif-vacio-ic { display: inline-flex; }
.dif-vacio-ic .ic {
  width: 40px;
  height: 40px;
  color: var(--accent);
  opacity: .8;
}

.dif-vacio h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.dif-vacio p {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  max-width: 400px;
}

/* Tabla de difusiones */
.dif-tabla-caja {
  margin-top: 8px;
}

/* ANCHOS FIJOS EN PX y el nombre se queda con el resto, como en la agenda (contacts.css): con
   porcentajes la columna de acciones (Emitir + tres iconos) no cabía, su contenido se salía de
   la celda y la caja enseñaba un scroll horizontal con la cabecera cortada (06-10). */
.dif-col-nombre { width: auto; }
.dif-col-dest { width: 130px; }
.dif-col-rapidos { width: 110px; }
.dif-col-estado { width: 170px; }
.dif-col-acciones { width: 250px; text-align: right; }
.dif-tabla { min-width: 760px; }
.dif-nombre-txt,
.dif-nombre-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dif-acts .modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dif-acts .modal-btn .ic { width: 14px; height: 14px; }

.dif-fila-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dif-nombre-txt {
  font-weight: 600;
  color: var(--text);
  font-size: 13.5px;
}

.dif-nombre-meta {
  font-size: 11.5px;
  color: var(--text-dim);
}

.dif-acts {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Distintivos de estado */
.dif-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.dif-estado .ic {
  width: 12px;
  height: 12px;
}

.dif-estado.ok {
  color: var(--plantilla-ok);
}

.dif-estado.espera {
  color: var(--info);
}

.dif-estado.espera .ic {
  animation: difGira 1.2s linear infinite;
}

.dif-estado.warn {
  color: var(--warn);
}

.dif-estado.dim {
  color: var(--text-dim);
  border-color: var(--border);
}

.dif-estado.mal {
  color: var(--danger);
}

/* Badges pequeños */
.dif-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-hover);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.dif-badge.ventana-ok {
  background: rgba(6, 194, 148, 0.12);
  color: var(--accent-strong);
}

.dif-badge.ventana-cerrada {
  background: rgba(226, 181, 62, 0.12);
  color: var(--warn);
}

.dif-badge.cupo-si {
  background: rgba(74, 158, 255, 0.12);
  color: var(--info);
}

/* Tarjetas de métricas para la revisión */
.dif-resumen-metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.dif-metrica-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dif-metrica-val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* El total junto a la cifra: pequeño y gris, para comparar sin competir con ella. */
.dif-metrica-total {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  opacity: .75;
}

.dif-metrica-lbl {
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Banner de aviso de cupo Meta */
.dif-aviso-cupo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

.dif-aviso-cupo.alerta {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--text);
}

.dif-aviso-cupo.alerta .ic {
  color: var(--warn);
}

.dif-aviso-cupo-ic {
  flex: 0 0 18px;
  margin-top: 1px;
}

.dif-aviso-cupo-txt {
  flex: 1 1 auto;
}

.dif-aviso-cupo-txt b {
  font-weight: 600;
}

/* Lista de destinatarios en revisión y ejecución */
.dif-lineas-caja {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
}

.dif-linea-fila {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background-color 120ms ease;
}

.dif-linea-fila:last-child {
  border-bottom: none;
}

.dif-linea-fila:hover {
  background: var(--bg-hover);
}

.dif-linea-top {
  display: flex;
  align-items: center;
  /* El contacto a la izquierda y sus distintivos a la derecha. */
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.dif-linea-contacto {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dif-linea-tel {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.dif-linea-nom {
  font-size: 12px;
  color: var(--text-dim);
}

.dif-linea-tags {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dif-linea-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 4px;
}

.dif-item-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11.5px;
}

.dif-item-chip.enviado,
.dif-item-chip.enviar {
  border-color: rgba(6, 194, 148, 0.35);
  color: var(--text);
}

.dif-item-chip.enviado .ic,
.dif-item-chip.enviar .ic {
  color: var(--plantilla-ok);
}

.dif-item-chip.omitido,
.dif-item-chip.omitir {
  border-color: rgba(226, 181, 62, 0.35);
  color: var(--text-dim);
}

.dif-item-chip.omitido .ic,
.dif-item-chip.omitir .ic {
  color: var(--warn);
}

.dif-item-chip.fallido {
  border-color: rgba(241, 92, 109, 0.35);
  color: var(--danger);
}

.dif-item-chip.fallido .ic {
  color: var(--danger);
}

/* Barra de progreso en vivo */
.dif-progreso-wrap {
  padding: 20px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dif-progreso-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.dif-progreso-tit {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.dif-progreso-track {
  width: 100%;
  height: 10px;
  background: var(--bg-hover);
  border-radius: 999px;
  overflow: hidden;
}

.dif-progreso-fill {
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease;
}

.dif-progreso-track.interrumpida .dif-progreso-fill {
  background: var(--warn);
}

.dif-progreso-bot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.dif-progreso-pct {
  font-weight: 700;
  color: var(--text);
}

/* Modales de difusión (ancho amplio en escritorio, separadores) */
.modal-card.dif-modal {
  width: 100%;
  max-width: 840px;
}

.modal-card.dif-modal .modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 20px 14px;
}

/* RELLENO UNIFORME. La cabecera y el pie de este modal llevan borde, así que el cuerpo ya no
   necesita el relleno corto de arriba y abajo de un modal normal (6/8 px): con borde, ese
   relleno corto dejaba el contenido pegado a las líneas y el lateral parecía enorme. */
.modal-card.dif-modal .modal-body {
  --modal-body-pad-t: 16px;
  --modal-body-pad-b: 16px;
}

.modal-card.dif-modal .modal-footer {
  border-top: 1px solid var(--border);
  padding: 14px 20px 16px;
  background: var(--bg-panel);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  position: relative;
  z-index: 3;
}

/* Editor de difusión */
.dif-editor-seccion {
  margin-bottom: 18px;
}

.dif-editor-seccion:last-child {
  margin-bottom: 0;
}

.dif-seccion-head {
  display: flex;
  align-items: center;
  /* El título a la izquierda y su recuento a la derecha, como el resto de cabeceras. */
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.dif-seccion-tit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.dif-seccion-conteo {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* La lista de rápidos para añadir es LA TABLA (components/tabla.css) con la fila del selector
   de «/» (.qr-item) en su celda. SIN scroll propio: se recorre con la paginación, y el único
   scroll es el de la modal (NO_REPETIR 65). */
.dif-rapidos-tit {
  margin: 12px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.difqr-tabla td { padding: 0; }
.difqr-tabla .qr-item { cursor: pointer; }

.dif-rapidos-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dif-rapido-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dif-rapido-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  width: 18px;
}

.dif-rapido-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dif-rapido-atajo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dif-rapido-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dif-rapido-acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Destinatarios: la AGENDA de Contactos (crearAgenda) con su propia forma; aquí solo lo que es
   del editor: el número a mano y sus chips. «Seleccionar todos» es la casilla de la cabecera de
   la tabla (components/tabla.js). */

.dif-dest-manual { margin-top: 14px; }
.dif-dest-manual-fila {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.dif-dest-manual-fila .tel-campo { flex: 1 1 auto; min-width: 0; }
.dif-dest-manual-fila .modal-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Sin chips sueltos, la caja no ocupa sitio. */
.dif-dest-chips-box:empty { display: none; }

.dif-dest-chips-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
}

.dif-dest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text);
}

.dif-dest-chip-del {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
}

.dif-dest-chip-del:hover {
  color: var(--danger);
}

.dif-dest-chip-del .ic {
  width: 12px;
  height: 12px;
}

/* Historial de ejecuciones */
.dif-historial-lista {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Cada emisión es un .help-item (tarjeta + acordeón de la consola). Aquí solo lo suyo. */
.dif-ejec { margin-bottom: 0; }
.dif-ejec > summary { flex-wrap: wrap; }
.dif-ejec-cifra { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dif-ejec-detalle { padding: 0 12px 12px; }

/* Responsive 375px */
@media (max-width: 640px) {
  .dif-resumen-metricas {
    grid-template-columns: repeat(2, 1fr);
  }
  .dif-col-rapidos { display: none; }
  .dif-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-overlay:has(.dif-modal) {
    padding: 0;
  }
  .modal-card.dif-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-card.dif-modal .modal-header,
  .modal-card.dif-modal .modal-footer {
    border-radius: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dif-panel,
  .dif-progreso-fill,
  .dif-estado.espera .ic {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Sin estilos en el HTML (06-10): lo que antes iba en style="…" --- */
.dif-celda-cargando { text-align: center; padding: 24px; }
.dif-col-acciones { text-align: right; }
.dif-revision-tit { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
/* Un título que sigue a otro bloque deja aire encima: pegado, se leía como parte de lo de arriba. */
.dif-revision-cuerpo > * + .dif-revision-tit { margin-top: 20px; }
.dif-rapidos-vacio { margin: 4px 0; }
.dif-historial-vacio { text-align: center; padding: 32px; color: var(--text-dim); }

@keyframes dif-desplegar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Quien no cabe en el tope de hoy, en la revisión. */
.dif-badge.cupo-fuera { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* La pausa por el tope diario: qué pasó, cuándo se libera y las dos salidas. */
.dif-pausa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-elev));
}
.dif-pausa:not([hidden]) { animation: dif-desplegar 180ms ease-out; }
.dif-pausa-ic { color: var(--warn); display: inline-flex; }
.dif-pausa-ic .ic { width: 18px; height: 18px; }
.dif-pausa-txt { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.dif-pausa-txt span { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dif-pausa-acts { display: flex; gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .dif-pausa:not([hidden]) { animation: none; }
}

/* Las cabeceras siguen la alineación de su columna: números y acciones a la derecha. */
.dif-tabla thead th.tabla-num,
.dif-tabla thead th.dif-col-acciones { text-align: right; }

/* --- Detalle por destinatario (revisión e historial): LA TABLA de la consola (06-10) --- */
/* Pagina con el componente tabla (difd-*): sin scroll propio dentro de la modal (NO_REPETIR 65). */
.difd-tabla .difd-col-dest, .difd-tabla .difd-td-dest { width: 34%; }
.difd-tabla .difd-col-ventana, .difd-tabla .difd-td-ventana { width: 150px; }
.difd-tabla td { vertical-align: top; }
.dif-dest-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dif-dest-txt .ag-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Distintivo con los colores de la barra de 24 h: verde abierta, azul cerrada. */
.dif-ventana {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.dif-ventana .ic { width: 12px; height: 12px; }
.dif-ventana--abierta { background: var(--accent-dim); color: var(--author-bot); }
.dif-ventana--cerrada { background: var(--info-bg); color: var(--info); }
.dif-tope { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.dif-tope--fuera { color: var(--warn); font-weight: 600; }

.dif-msjs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dif-msj { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.4; }
.dif-msj-ic { display: inline-flex; flex: 0 0 auto; margin-top: 2px; }
.dif-msj-ic .ic { width: 13px; height: 13px; }
.dif-msj-cuerpo { min-width: 0; }
/* El atajo como la etiqueta de código de la Ayuda (.help-body code). */
.dif-msj-cuerpo b {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  background: var(--bg-hover);
  padding: 1px 5px;
  border-radius: 5px;
}
.dif-msj-que { color: var(--text-dim); }
.dif-msj-motivo { display: block; color: var(--text-dim); font-size: 11.5px; }
.dif-msj--enviar .dif-msj-ic,
.dif-msj--enviado .dif-msj-ic { color: var(--ok); }
/* «No se envía» es un fallo anunciado: la X va en rojo, como el ⚠ de lo que falló. */
.dif-msj--omitir .dif-msj-ic,
.dif-msj--omitido .dif-msj-ic { color: var(--danger); }
.dif-msj--omitir b,
.dif-msj--omitido b { color: var(--text-dim); }
.dif-msj--fallido .dif-msj-ic,
.dif-msj--fallido .dif-msj-que { color: var(--danger); }

@media (max-width: 640px) {
  .difd-tabla .difd-col-dest, .difd-tabla .difd-td-dest { width: 45%; }
  .difd-tabla .difd-col-ventana, .difd-tabla .difd-td-ventana { width: 90px; }
}

/* --- Historial: la cabecera de cada emisión ---
   EN UNA FILA SI CABE, EN DOS SI NO: estrecha, en una sola fila el texto se partía. Lo decide el ancho de la LISTA (container query), no el de la ventana: la
   modal no mide lo mismo que la pantalla. */
/* `clip` Y NO `hidden`: recorta igual las esquinas de la tarjeta, pero `hidden` la hacía
   contenedor de scroll y la cabecera de la tabla de dentro se pegaba a ella, que no se mueve,
   en vez de a la modal, y no quedaba fija. */
.help-item.dif-ejec { overflow: clip; }
.dif-ejec > summary .help-chev { order: 5; }
.dif-ejec-fila2 { display: contents; }
.dif-ejec-acts { display: inline-flex; gap: 8px; }
@container (max-width: 640px) {
  .dif-ejec > summary { flex-wrap: wrap; row-gap: 8px; }
  .dif-ejec > summary .help-head { flex: 1 1 160px; min-width: 0; }
  .dif-ejec-fila2 {
    order: 6;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding-left: 36px;
  }
  /* Todo alineado a la izquierda: partido en filas, las acciones a la derecha descolocaban
     el bloque. */
  .dif-ejec-acts { display: inline-flex; flex-wrap: wrap; }
}

/* --- Vista previa de la revisión: lo que le llega al destinatario elegido --- */
/* UN SOLO FONDO DE CHAT con los mensajes en orden, como en WhatsApp: cada vista previa trae su
   propio marco (.wa-prev) y apilados eran cajas dentro de una caja. */
.dif-rev-prev {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--chat-bg);
}
.dif-rev-prev .wa-prev { border: 0; padding: 0; min-height: 0; background: transparent; }
/* El ancho de un mensaje de WhatsApp, no el de la modal: a lo ancho de 760 px no se parecía
   a lo que ve el cliente. El tope va en el mensaje entero (globo y botones a la vez). */
.dif-rev-prev-cuerpo > .wa-prev { max-width: 420px; }
.dif-rev-prev-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: dif-prev-in 160ms ease-out;
}
@keyframes dif-prev-in { from { opacity: 0; transform: translateY(4px); } }
.dif-prev-omitido { margin: 0; font-size: 12.5px; color: var(--text-dim); text-decoration: line-through; }
.dif-prev-omitido .ic { width: 13px; height: 13px; color: var(--danger); vertical-align: -2px; }
.difd-tabla .tabla-fila { cursor: pointer; }
.difd-fila--vista td { background: var(--accent-dim); }
@media (prefers-reduced-motion: reduce) { .dif-rev-prev-cuerpo { animation: none; } }

/* El aviso junto a «Emitir»: un rápido cambió y le faltan variables (B132). */
.dif-falta-ic { display: inline-flex; color: var(--warn); cursor: help; }
.dif-falta-ic .ic { width: 18px; height: 18px; }
.dif-ejec-detalle { margin-top: 8px; }

/* --- Variables de cada rápido (B132) --- */
.dif-rapido-estado { align-self: flex-start; margin-top: 4px; }
.dif-respaldo { margin-top: 12px; }
/* Aparece cuando se añade un rápido con {{nombre}}: entra deslizando, no de golpe. */
.dif-respaldo:not([hidden]) { animation: dif-respaldo-in 180ms ease-out; }
@keyframes dif-respaldo-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dif-respaldo:not([hidden]) { animation: none; } }
.dif-faltan { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dif-faltan li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .dif-rapido-item { flex-wrap: wrap; }
  .dif-rapido-acts { margin-left: auto; }
}