/* Checklist de Procesos (módulo Ensamble, pestaña Reporte de Tareas). */

.checklist-chip {
    border: 1.5px solid transparent;
    font-size: 0.85rem;
    transition: filter 0.12s ease, transform 0.06s ease;
    cursor: pointer;
}

.checklist-chip:hover {
    filter: brightness(0.97);
}

.checklist-chip:active {
    transform: scale(0.97);
}

/* Puntos de resumen del checklist en la tarjeta de tarea (lista de pendientes). */
.checklist-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Franja compacta que agrupa los puntos del checklist + la fracción, dentro
   de la tarjeta de tarea -- le da peso visual propio en vez de perderse
   como una línea de texto suelta entre la barra de progreso y el CTA. */
.checklist-strip {
    background: #f8f9fb;
    border-radius: 10px;
    padding: 8px 12px;
}

.task-card-ensamble {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.task-card-ensamble:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 22, 29, 0.1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Checklist de procesos: línea de producción + panel de cronómetro.
   Un paso es una tarjeta (no una píldora): marca circular con el estado, nombre
   y una línea de estado. La sesión en curso se pinta con color pleno y respira;
   lo parcial muestra su avance como anillo. El detalle del proceso elegido va en
   un panel oscuro tipo instrumento, con el reloj grande (legible a un brazo de
   distancia, en tablet). Los ids/data-proc-t que mueve el cronómetro no cambian.
   ─────────────────────────────────────────────────────────────────────────── */
.ens-pasos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 720px) {
    .ens-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ens-paso {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    padding: 10px 10px 10px 11px;
    text-align: left;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.ens-paso:hover { border-color: #b6c2d6; transform: translateY(-1px); }
.ens-paso:active { transform: scale(.98); }
.ens-paso:focus-visible { outline: 3px solid rgba(67, 97, 238, .45); outline-offset: 2px; }

.ens-paso-n {
    position: absolute;
    top: 7px;
    right: 11px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: #cbd5e1;
}

.ens-paso-marca {
    position: relative;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .88rem;
    color: #64748b;
    background: #f1f5f9;
}

.ens-paso-marca i { position: relative; z-index: 1; }

.ens-paso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.ens-paso-txt b { font-size: .84rem; font-weight: 700; padding-right: 10px; }
.ens-paso-txt small { font-size: .76rem; color: #64748b; font-variant-numeric: tabular-nums; }

.ens-paso.es-sel { border-color: #4361ee; box-shadow: 0 0 0 4px rgba(67, 97, 238, .16); }

/* En curso: color pleno y marca que respira. */
.ens-paso--C {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
    box-shadow: 0 8px 20px rgba(67, 97, 238, .32);
}
.ens-paso--C .ens-paso-n { color: rgba(255, 255, 255, .45); }
.ens-paso--C .ens-paso-txt small { color: rgba(255, 255, 255, .88); }
.ens-paso--C .ens-paso-marca { color: #fff; background: rgba(255, 255, 255, .2); animation: ens-respira 1.8s ease-in-out infinite; }
.ens-paso--C.es-sel { box-shadow: 0 0 0 4px rgba(67, 97, 238, .28), 0 8px 20px rgba(67, 97, 238, .32); }
.ens-paso--espera.ens-paso--C { background: linear-gradient(135deg, #f97316 0%, #dc2626 100%); box-shadow: 0 8px 20px rgba(234, 88, 12, .34); }
.ens-paso--espera.ens-paso--C .ens-paso-marca i { animation: ens-llama 1.1s ease-in-out infinite alternate; }
.ens-paso--pausa.ens-paso--C { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); box-shadow: 0 8px 20px rgba(217, 119, 6, .3); }
.ens-paso--pausa.ens-paso--C .ens-paso-marca { animation: none; }

/* Parcial: anillo de avance (--pct = unidades hechas / objetivo). */
.ens-paso--A { border-color: #fcd34d; background: #fffbeb; }
.ens-paso--A .ens-paso-marca {
    color: #b45309;
    background: conic-gradient(#f59e0b calc(var(--pct, 0) * 1%), #fde68a 0);
}
.ens-paso--A .ens-paso-marca::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fffbeb; }
.ens-paso--A .ens-paso-txt small { color: #92400e; font-weight: 600; }

.ens-paso--H { border-color: #bbf7d0; background: #f0fdf4; }
.ens-paso--H .ens-paso-marca { color: #fff; background: #16a34a; }
.ens-paso--H .ens-paso-txt small { color: #166534; }

.ens-paso--N { background: #f8fafc; border-style: dashed; opacity: .62; }
.ens-paso--N .ens-paso-txt b { text-decoration: line-through; color: #64748b; }

.ens-ayuda { margin-top: 10px; font-size: .78rem; color: #64748b; }
.ens-ayuda i { color: #94a3b8; margin-right: 4px; }

/* Panel del proceso elegido. */
.ens-panel {
    position: relative;
    overflow: hidden;
    padding: 18px 20px 20px;
    color: #e2e8f0;
    border-radius: 20px;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .26);
}
.ens-panel::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ens-brillo, rgba(67, 97, 238, .38)) 0%, transparent 68%);
    pointer-events: none;
}
.ens-panel--curso { --ens-brillo: rgba(67, 97, 238, .5); }
.ens-panel--espera { --ens-brillo: rgba(249, 115, 22, .5); }
.ens-panel--pausa { --ens-brillo: rgba(245, 158, 11, .45); }
.ens-panel--hecho { --ens-brillo: rgba(34, 197, 94, .38); }
.ens-panel--ocioso { --ens-brillo: rgba(148, 163, 184, .22); }

.ens-panel > * { position: relative; z-index: 1; }

.ens-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ens-titulo { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: .01em; }

.ens-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}
.ens-led { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.ens-led--on { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: ens-led 1.6s ease-out infinite; }
.ens-led--pausa { background: #fbbf24; }
.ens-led--horno { background: #fb923c; box-shadow: 0 0 0 0 rgba(251, 146, 60, .6); animation: ens-led 1.6s ease-out infinite; }
.ens-led--hecho { background: #4ade80; }

.ens-reloj {
    margin: 14px 0 2px;
    font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-size: clamp(2.7rem, 9vw, 3.9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.ens-reloj--pausa { color: #fbbf24; }
.ens-sub { color: #94a3b8; font-size: .86rem; margin-top: 4px; }
.ens-sub b { color: #e2e8f0; }
.ens-nota { color: #94a3b8; font-size: .86rem; margin: 10px 0 0; }
.ens-error { margin-top: 12px; padding: 8px 12px; font-size: .84rem; color: #fecaca; background: rgba(239, 68, 68, .16); border-radius: 10px; }

.ens-avance { margin: 12px 0 2px; }
.ens-avance-barra { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ens-avance-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #f97316); }
.ens-avance-txt { display: flex; justify-content: space-between; margin-top: 6px; font-size: .8rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ens-avance-txt b { color: #fff; }

.ens-sesiones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ens-ses {
    padding: 4px 10px;
    font-size: .78rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.ens-ses b { color: #fff; font-weight: 700; }

.ens-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ens-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 22px;
    font: inherit;
    font-size: .94rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .08s ease, filter .15s ease, background .15s ease;
}
.ens-btn:hover { background: rgba(255, 255, 255, .14); }
.ens-btn:active { transform: scale(.97); }
.ens-btn:focus-visible { outline: 3px solid rgba(147, 197, 253, .7); outline-offset: 2px; }
.ens-btn--p { color: #fff; border-color: transparent; background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%); box-shadow: 0 8px 18px rgba(67, 97, 238, .4); }
.ens-btn--p:hover { background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%); filter: brightness(1.1); }
.ens-btn--stop { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); box-shadow: 0 8px 18px rgba(225, 29, 72, .36); }
.ens-btn--stop:hover { background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); filter: brightness(1.1); }

.ens-campo { margin-top: 14px; }
.ens-campo label { display: block; margin-bottom: 6px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; }
.ens-campo input {
    width: 100%;
    max-width: 200px;
    min-height: 54px;
    padding: 0 16px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
}
.ens-campo input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .28); }

/* Mano de obra / espera en hornos. */
.ens-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ens-res { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.ens-res-ico { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: .95rem; }
.ens-res--mo .ens-res-ico { color: #4361ee; background: #eef2ff; }
.ens-res--ho .ens-res-ico { color: #ea580c; background: #fff1e6; }
.ens-res-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ens-res-txt small { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.ens-res-txt b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.25rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
    .ens-pasos { gap: 8px; }
    .ens-paso { min-height: 58px; padding: 8px 8px 8px 9px; gap: 8px; }
    .ens-paso-n { display: none; }
    .ens-resumen { grid-template-columns: 1fr; }
    .ens-btn { flex: 1 1 100%; }
}

@keyframes ens-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ens-llama { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.18) rotate(4deg); } }
@keyframes ens-led { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } }

@media (prefers-reduced-motion: reduce) {
    .ens-paso, .ens-paso-marca, .ens-paso-marca i, .ens-led, .ens-btn { animation: none !important; transition: none !important; }
}