/* Registro de ejecuciones (js/vistas/ejecucion.js): la lista de Automatizar → Ejecuciones y #/ejecucion/<id>.
   design-system/pages/crm.md («Registro de ejecuciones»). Prefijo crm-ej-; las piezas compartidas están en crm.css.
   Celular primero; las columnas de computadora usan container queries sobre .crm-vista. */

/* ============ Lista (ui.tabla) ============ */
.crm-ej-lista-zona .crm-titulo-sec{flex-wrap:wrap;row-gap:10px}
.crm-ej-periodo{flex:1 1 260px;max-width:360px;margin-left:auto}
.crm-ej-periodo .crm-seg>button{padding:0 8px}
.crm-ej-flujo-chip{margin-bottom:8px}
.crm-ej-nom{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;vertical-align:middle}
.crm-ej-quien{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-ej-ico{width:24px;height:24px;display:grid;place-items:center;flex:none;color:var(--suave)}
.crm-ej-ico .crm-i{width:22px;height:22px}
.crm-ej-t-ok{color:var(--ok-texto)}
.crm-ej-t-falla{color:var(--error)}
.crm-ej-t-curso{color:var(--acento-texto)}
.crm-ej-canal{display:inline-flex;align-items:center;gap:8px}
.crm-ej-cuando{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25;font-variant-numeric:tabular-nums}
.crm-ej-cuando small{display:none;font-size:13px;color:var(--suave)}
/* La fila: el ícono de estado a la izquierda, el cliente y el resultado en palabras a su lado. Rama y canal ya se dicen en
   la fila (resultado y logo): cuando sus columnas no caben, no se repiten bajo el cliente. */
.crm-ej-tabla .crm-tabla .crm-td-prin{position:relative;padding-left:46px}
.crm-ej-tabla .crm-tabla .crm-td-prin .crm-ej-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.crm-ej-tabla .crm-tabla .crm-td-prin .crm-ej-nom{gap:8px}
.crm-ej-tabla .crm-tabla .crm-td-prin .crm-ej-quien{font-weight:600}
.crm-ej-tabla .crm-tabla .crm-td-prin small.crm-ver-b1200,.crm-ej-tabla .crm-tabla .crm-td-prin small.crm-ver-b1300{display:none!important}
.crm-ej-tabla .crm-tabla tbody td{height:56px}

/* Abajo de 920 px de ancho de la lista: una tarjeta con renglones de 56 px (ícono, cliente y resultado, hora y duración). */
@container tabla (max-width:919px){
  .crm-ej-tabla .crm-tabla tbody{gap:0;background:var(--hoja);border-radius:var(--r2);box-shadow:var(--sombra);overflow:hidden}
  .crm-ej-tabla .crm-tabla tbody tr{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:8px;min-height:56px;padding:8px 2px 8px 0;border-radius:0;box-shadow:none;background:none}
  .crm-ej-tabla .crm-tabla tbody tr.crm-con-sel{padding-left:0}
  .crm-ej-tabla .crm-tabla tbody tr+tr{box-shadow:inset 0 1px 0 var(--linea)}
  .crm-ej-tabla .crm-tabla tbody tr.crm-abierta,.crm-ej-tabla .crm-tabla tbody tr.crm-elegida{background:var(--tinte)}
  .crm-ej-tabla .crm-tabla .crm-td-sel{grid-row:1;margin-top:0;align-self:center}
  .crm-ej-tabla .crm-tabla .crm-td-prin{grid-column:2;grid-row:1;min-height:40px;padding-left:36px!important}
  .crm-ej-tabla .crm-tabla tbody tr:not(.crm-con-sel) .crm-td-prin{padding-left:50px!important}
  .crm-ej-tabla .crm-tabla tbody tr:not(.crm-con-sel) .crm-td-prin .crm-ej-ico{left:14px}
  .crm-ej-tabla .crm-tabla .crm-td-prin .crm-ej-ico{left:0}
  .crm-ej-tabla .crm-tabla .crm-td-prin b,.crm-ej-tabla .crm-tabla .crm-td-prin .crm-ej-quien{font-size:15px}
  .crm-ej-tabla .crm-tabla .crm-td-prin>small:not(.crm-ver){display:block!important;-webkit-line-clamp:unset;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .crm-ej-tabla .crm-tabla td[data-etiqueta="Hora"]{grid-column:3;grid-row:1;padding-right:0!important;min-height:0;font-size:13px;color:var(--suave)}
  .crm-ej-tabla .crm-tabla td[data-etiqueta="Hora"]::before{display:none}
  .crm-ej-tabla .crm-ej-cuando small{display:block}
  .crm-ej-tabla .crm-tabla .crm-td-menu{grid-column:4;grid-row:1;margin-top:0;align-self:center}
  .crm-ej-tabla .crm-tabla .crm-td-menu .crm-btn-icono{width:36px;height:36px}
}

/* ============ Registro de una ejecución ============ */
.crm-ej-cab h1{font-size:28px}
.crm-ej-id{font-variant-numeric:tabular-nums}
.crm-ej-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--suave);margin-top:6px;min-width:0}
.crm-ej-meta .crm-ej-quien{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--texto);max-width:100%}
.crm-ej-datos{white-space:normal;overflow-wrap:anywhere;min-width:0}
.crm-ej-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:4px 16px 0;align-items:start}
.crm-ej-col-lista,.crm-ej-detalle{display:none}
.crm-ej-centro{min-width:0}
.crm-ej-esq-pasos{margin-top:14px}

/* Resumen arriba */
.crm-ej-res{padding:14px 16px;border-radius:var(--r2);min-width:0}
.crm-ej-res h2{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.crm-ej-res h2 .crm-i{width:22px;height:22px}
.crm-ej-res>p{font-size:15px;margin-top:4px;overflow-wrap:anywhere}
.crm-ej-res .crm-ej-hacer,.crm-ej-error .crm-ej-hacer{font-size:14px;color:var(--suave);margin-top:6px}
.crm-ej-res-falla{background:var(--error-fondo);box-shadow:inset 0 0 0 1px var(--error-borde)}
.crm-ej-res-falla h2{color:var(--error)}
.crm-ej-res-bien{background:var(--ok-fondo)}
.crm-ej-res-bien h2{color:var(--ok-texto)}
.crm-ej-res-gris{background:var(--campo-hover)}
.crm-ej-res-gris h2{color:var(--texto)}
.crm-ej-res-curso{background:var(--tinte)}
.crm-ej-res-curso h2{color:var(--acento-texto)}
.crm-ej-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.crm-ej-acc .crm-btn{flex:1 1 auto}
.crm-ej-al-fallar{margin-top:12px;padding-top:10px;border-top:1px solid var(--error-borde);font-size:14px}
.crm-ej-al-fallar>p{font-weight:650;margin-bottom:2px}
.crm-ej-al-fallar li,.crm-ej-hechos li{display:flex;align-items:flex-start;gap:8px;min-height:30px;padding:4px 0;line-height:1.35}
.crm-ej-al-fallar li .crm-i,.crm-ej-hechos li .crm-i{width:17px;height:17px;color:var(--ok-texto);flex:none;margin-top:1px}
.crm-ej-hechos{margin-top:8px;font-size:14px}
.crm-ej-nada{color:var(--suave)}
.crm-ej-cita{margin:12px 0 0;padding:12px 14px;border-radius:16px;background:var(--burbuja-bot);box-shadow:inset 0 0 0 1px var(--tinte-2);font-size:15.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-ej-res-bien h3{font-size:15px;font-weight:700;margin-top:14px}
.crm-ej-pq{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.crm-ej-pq li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.crm-ej-pq-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hoja);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.crm-ej-pq b{display:block;font-size:15px;font-weight:650;overflow-wrap:anywhere}
.crm-ej-pq p{font-size:14px;color:var(--suave);overflow-wrap:anywhere}
.crm-ej-codigo{display:block;margin-top:4px;padding:6px 10px;border-radius:10px;background:var(--campo);font:12.5px/1.45 var(--mono);color:var(--suave);overflow-wrap:anywhere;white-space:pre-wrap}
.crm-ej-res-bien .crm-ej-codigo{background:var(--hoja)}
.crm-ej-dato{margin-top:10px}
.crm-ej-reintentos:empty{display:none}
.crm-ej-reintentos{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.crm-ej-reint{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 12px;border-radius:12px;background:var(--hoja);box-shadow:var(--sombra);font-size:14px}
.crm-ej-reint>span{flex:1;min-width:0}
.crm-ej-reint>.crm-i{color:var(--acento-texto)}

/* Pasos: línea de tiempo */
.crm-ej-pasos{position:relative;margin-top:14px}
.crm-ej-paso{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px}
.crm-ej-paso::before{content:"";position:absolute;left:13px;top:34px;bottom:-6px;width:2px;background:var(--linea)}
.crm-ej-paso:last-child::before{display:none}
.crm-ej-paso-ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:14px;position:relative;z-index:1;background:var(--fondo);color:var(--suave)}
.crm-ej-paso-ic .crm-i{width:22px;height:22px}
.crm-ej-v-ok .crm-ej-paso-ic{color:var(--ok-texto)}
.crm-ej-v-falla .crm-ej-paso-ic{color:var(--error)}
.crm-ej-v-corriendo .crm-ej-paso-ic,.crm-ej-v-espera .crm-ej-paso-ic{color:var(--acento-texto)}
.crm-ej-paso-caja{min-width:0;margin-bottom:8px;border-radius:14px;background:var(--hoja);box-shadow:var(--sombra)}
.crm-ej-v-falla .crm-ej-paso-caja{box-shadow:inset 0 0 0 1.5px var(--error),var(--sombra)}
.crm-ej-v-pendiente .crm-ej-paso-caja,.crm-ej-v-salto .crm-ej-paso-caja{background:transparent;box-shadow:inset 0 0 0 1px var(--linea)}
.crm-ej-paso.crm-sel .crm-ej-paso-caja{box-shadow:0 0 0 2px var(--acento-texto),var(--sombra)}
.crm-ej-v-falla.crm-sel .crm-ej-paso-caja{box-shadow:inset 0 0 0 1.5px var(--error),0 0 0 2px var(--error-borde)}
.crm-ej-paso-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;width:100%;padding:11px 14px;min-height:56px;text-align:left;align-items:center;border-radius:14px}
.crm-ej-paso-btn>b{font-size:15.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-ej-paso-btn>small{grid-column:1;font-size:13.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-ej-v-falla .crm-ej-paso-btn>small{color:var(--error);font-weight:600}
.crm-ej-v-pendiente .crm-ej-paso-btn>b,.crm-ej-v-salto .crm-ej-paso-btn>b{color:var(--suave)}
.crm-ej-paso-dur{grid-row:1/3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;font-size:13.5px;color:var(--suave);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.crm-ej-paso-dur small{font-size:12px}
@media (hover:hover){.crm-ej-paso-btn:hover{background:var(--campo)}.crm-ej-v-pendiente .crm-ej-paso-btn:hover,.crm-ej-v-salto .crm-ej-paso-btn:hover{background:var(--campo-hover)}}
.crm-ej-paso-det{padding:0 14px 14px}

/* Detalle de un paso */
.crm-ej-det{min-width:0}
.crm-ej-error{margin-top:10px;padding:12px;border-radius:12px;background:var(--error-fondo)}
.crm-ej-error>b{color:var(--error);font-size:15px;display:block}
.crm-ej-error>p{font-size:14.5px;margin-top:2px;overflow-wrap:anywhere}
.crm-ej-error .crm-tecnico code{background:var(--hoja)}
.crm-ej-ia{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.crm-ej-ia .crm-chip{max-width:100%}
.crm-ej-io{margin-top:10px}
.crm-ej-io h4{font-size:12.5px;font-weight:700;color:var(--suave);margin-bottom:4px}
.crm-ej-io dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 12px;border-radius:12px;background:var(--campo);font-size:14px}
.crm-ej-io dt{color:var(--suave);max-width:150px;overflow-wrap:anywhere}
.crm-ej-io dd{overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}
.crm-ej-io-vacio{font-size:14px;color:var(--suave);padding:10px 12px;border-radius:12px;background:var(--campo)}
.crm-ej-det .crm-tecnico code{background:var(--campo)}
.crm-ej-det-sub{font-size:14px;color:var(--suave);margin-top:2px;overflow-wrap:anywhere}

/* Ejecuciones de hoy (computadora) */
.crm-ej-col-tit{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 4px}
.crm-ej-col-tit h3{font-size:14px;color:var(--suave);font-weight:650}
.crm-ej-col-tit .crm-btn-texto{font-size:13.5px}
.crm-ej-hoy-lista{overflow:hidden}
.crm-ej-fila{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;padding:8px 14px;width:100%;text-align:left}
.crm-ej-fila+.crm-ej-fila{box-shadow:inset 0 1px 0 var(--linea)}
.crm-ej-fila-txt{display:flex;flex-direction:column;min-width:0}
.crm-ej-fila-txt b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ej-fila-txt small{font-size:13px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-ej-fila-der{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;color:var(--suave);font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-ej-fila-der small{font-size:13px}
.crm-ej-fila.crm-sel{background:var(--tinte)}
@media (hover:hover){.crm-ej-fila:hover{background:var(--campo)}.crm-ej-fila.crm-sel:hover{background:var(--tinte)}}

/* Giro del estado «corriendo» (quieto con reducir movimiento) */
.crm-ej-gira{animation:crm-gira 1.1s linear infinite}

/* Dos columnas (pasos y detalle) desde 740 px de pantalla y tres (con las de hoy) desde 1,080 px */
@container (min-width:740px){
  .crm-ej-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.95fr);gap:20px}
  .crm-ej-detalle{display:block;position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:18px 20px}
  .crm-ej-detalle>h3{font-size:19px;letter-spacing:-.02em;overflow-wrap:anywhere}
  .crm-ej-paso-det{display:none!important}
}
@container (min-width:1080px){
  .crm-ej-grid{grid-template-columns:300px minmax(0,440px) minmax(0,1fr)}
  .crm-ej-col-lista{display:block;position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px}
}
@media (min-width:1000px){.crm-ej-grid{padding:4px 28px 0}}
@media (prefers-reduced-motion:reduce){.crm-ej-gira{animation:none}}