/* Cockpit (Control Room) — superfícies/texto vêm dos tokens --motryz-*; cores de estado têm fallback próprio
   (se o arquivo de tokens não carregar, a tela não perde a cor). */

.ck-root, .ck-drawer {
    --ck-gap: var(--motryz-space-lg, 1rem);
    --ck-blue: #6366f1;   --ck-blue-rgb: 99, 102, 241;
    --ck-green: #22c55e;  --ck-green-rgb: 34, 197, 94;
    --ck-amber: #f59e0b;  --ck-amber-rgb: 245, 158, 11;
    --ck-red: #ef4444;    --ck-red-rgb: 239, 68, 68;
    --ck-purple: #8b5cf6; --ck-purple-rgb: 139, 92, 246;
    --ck-teal: #14b8a6;   --ck-teal-rgb: 20, 184, 166;
    --ck-sky: #0ea5e9;    --ck-sky-rgb: 14, 165, 233;
    --ck-t-green: #166534; --ck-t-amber: #92400e; --ck-t-red: #991b1b; --ck-t-blue: #4338ca; --ck-t-sky: #075985; --ck-t-purple: #6d28d9;
    /* superfícies SÓLIDAS (não depender de tokens/tema: translúcido deixava o fundo vazar nos cards e na gaveta) */
    --ck-card: #ffffff;
    --ck-card-2: #f4f6fb;
    --ck-console: #020617;
    --ck-line: var(--motryz-border, #e5e7eb);
    --ck-strong: var(--motryz-text-strong, #111827);
    --ck-text: var(--ck-strong);
    --ck-sub: var(--motryz-text-subtle, #6b7280);
    --ck-muted: #5b6779;   /* o token do tema (#999) dá ~2,8:1 no claro; este passa de 5:1 */
}
.dark-only .ck-root, .dark-only .ck-drawer {
    --ck-card: #262b38; --ck-card-2: #1d2230;
    /* texto e linhas do tema escuro gravados aqui (iguais ao motryz-tokens.css): se o arquivo de tokens não chegar ao navegador (cache, caminho), os títulos não ficam escuros sobre escuro */
    --ck-strong: #e8ecf7; --ck-sub: #a6aec1; --ck-line: #3b465b; --ck-text: #e8ecf7;
    --motryz-text-strong: #e8ecf7; --motryz-text-subtle: #a6aec1; --motryz-text-muted: #98a6ad; --motryz-border: #3b465b; --motryz-border-soft: #3b465b;
    --ck-t-green: #4ade80; --ck-t-amber: #fbbf24; --ck-t-red: #f87171; --ck-t-blue: #a5b4fc; --ck-t-sky: #7dd3fc; --ck-t-purple: #c4b5fd;
    --ck-muted: #98a6ad;
}
.ck-root [hidden], .ck-drawer [hidden] { display: none !important; }

/* ---------- resumo ---------- */
.ck-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ck-gap); margin-bottom: var(--ck-gap); }
.ck-stat {
    --c: var(--ck-blue); --c-rgb: var(--ck-blue-rgb); --c-t: var(--ck-t-blue); --c-on: #fff;
    position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
    padding: 14px 18px; border-radius: var(--motryz-radius-card, 12px); overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--c-rgb), .14), rgba(var(--c-rgb), .03) 70%), var(--ck-card);
    border: 1px solid rgba(var(--c-rgb), .35); border-left: 4px solid var(--c);
    box-shadow: var(--motryz-shadow-sm);
}
.ck-stat-ico { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; color: var(--c-on, #fff); background: var(--c); box-shadow: 0 4px 10px rgba(var(--c-rgb), .35); }
.ck-stat-num { font-size: var(--motryz-font-2xl, 1.5rem); font-weight: 700; line-height: 1.1; color: var(--c-t, var(--c)); font-variant-numeric: tabular-nums; }
.ck-stat-lbl { font-size: var(--motryz-font-sm, .8125rem); color: var(--ck-sub); }
.ck-stat--agenda { --c: var(--ck-sky); --c-rgb: var(--ck-sky-rgb); }
.ck-stat--fila { --c: var(--ck-blue);  --c-rgb: var(--ck-blue-rgb); }
.ck-stat--run  { --c: var(--ck-amber); --c-rgb: var(--ck-amber-rgb); }
.ck-stat--ok   { --c: var(--ck-green); --c-rgb: var(--ck-green-rgb); }
.ck-stat--erro { --c: var(--ck-red);   --c-rgb: var(--ck-red-rgb); }
/* número e ícone legíveis em cada cor (branco sobre âmbar, verde e azul-claro dava menos de 3:1) */
.ck-stat--agenda { --c-t: var(--ck-t-sky); --c-on: #0f172a; }
.ck-stat--run { --c-t: var(--ck-t-amber); --c-on: #0f172a; }
.ck-stat--ok { --c-t: var(--ck-t-green); --c-on: #0f172a; }
.ck-stat--erro { --c-t: var(--ck-t-red); }
.ck-stat--run.is-on .ck-stat-ico i { animation: ck-spin 2.4s linear infinite; }

/* ---------- barra ---------- */
.ck-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--ck-gap); }
.ck-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ck-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--motryz-text-muted); pointer-events: none; }
.ck-search .form-control { padding-left: 34px; }
.ck-live { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: var(--motryz-font-sm, .8125rem); color: var(--motryz-text-subtle); }
.ck-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ck-muted); }
.ck-live.is-ok .ck-live-dot { background: var(--ck-green); box-shadow: 0 0 0 0 rgba(var(--ck-green-rgb), .55); animation: ck-ping 1.6s infinite; }
.ck-live.is-erro .ck-live-dot { background: var(--ck-red); }
.ck-btn-tela { display: inline-flex; align-items: center; gap: 6px; }
.ck-filtro {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 12px; border-radius: var(--motryz-radius-chip, 999px);
    background: rgba(var(--ck-blue-rgb), .12); border: 1px solid rgba(var(--ck-blue-rgb), .4); color: var(--ck-t-blue);
    font-size: var(--motryz-font-sm, .8125rem); font-weight: 600;
}
.ck-filtro span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-filtro button { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(var(--ck-blue-rgb), .2); color: inherit; line-height: 1; cursor: pointer; }
.ck-filtro button:hover { background: var(--ck-blue); color: #fff; }
.ck-aviso {
    margin-bottom: var(--ck-gap); padding: 10px 14px; border-radius: var(--motryz-radius-control, 8px);
    background: var(--motryz-warning-bg-soft); border: 1px solid var(--motryz-warning-border-soft); color: var(--motryz-text-strong);
}

/* faixa "topologia" */
.ck-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ck-strip-t { display: inline-flex; align-items: center; gap: 8px; font-size: var(--motryz-font-xs, .75rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--motryz-text-subtle); }
.ck-legenda {
    display: inline-flex; align-items: center; gap: 14px; padding: 4px 14px; border-radius: var(--motryz-radius-chip);
    background: var(--ck-card); border: 1px solid var(--ck-line); box-shadow: var(--motryz-shadow-sm);
    font-size: var(--motryz-font-xs, .75rem); font-weight: 500; color: var(--motryz-text-subtle);
}
.ck-legenda b { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.ck-legenda .l-a { background: var(--ck-teal); }
.ck-legenda .l-w { background: var(--ck-purple); }
.ck-legenda .sep { width: 1px; height: 14px; background: var(--motryz-border); }

/* ---------- quadro ---------- */
.ck-board {
    position: relative; display: grid; align-items: start; gap: 64px;
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.05fr) minmax(300px, 1fr);
    padding: 18px; border-radius: var(--motryz-radius-xl, 16px);
    /* fundo pontilhado estilo n8n (suave) */
    background-color: #f1f3f8;
    background-image: radial-gradient(rgba(100, 116, 139, .34) 1.1px, transparent 1.3px);
    background-size: 20px 20px;
    border: 1px solid var(--ck-line);
}
.dark-only .ck-board {
    background-color: #1c202b;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.1px, transparent 1.3px);
}
.ck-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.ck-line { fill: none; stroke: var(--ck-blue); stroke-width: 2; stroke-linecap: round; opacity: .65; }
.ck-line--run { stroke: var(--ck-green); stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .95; animation: ck-dash 1s linear infinite; filter: drop-shadow(0 0 3px rgba(var(--ck-green-rgb), .5)); }
.ck-line--erro { stroke: var(--ck-red); }
.ck-particula { fill: var(--ck-green); }

.ck-col { min-width: 0; --c: var(--ck-blue); --c-rgb: var(--ck-blue-rgb); }
.ck-col--a { --c: var(--ck-teal);   --c-rgb: var(--ck-teal-rgb); }
.ck-col--w { --c: var(--ck-purple); --c-rgb: var(--ck-purple-rgb); }
.ck-col--x { --c: var(--ck-amber);  --c-rgb: var(--ck-amber-rgb); }
.ck-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 7px 12px; border-radius: 10px; background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .3); }
.ck-col-head h6 { margin: 0; font-size: var(--motryz-font-xs, .75rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-strong); }
.ck-col-head h6 i { margin-right: 6px; color: var(--c); }
.ck-count { min-width: 24px; padding: 1px 8px; text-align: center; border-radius: var(--motryz-radius-chip, 999px); background: var(--c); color: #fff; font-size: var(--motryz-font-xs, .75rem); font-weight: 700; }
.ck-col--a .ck-count, .ck-col--x .ck-count { color: #0f172a; }   /* texto escuro sobre verde-água e âmbar */
.ck-list { display: flex; flex-direction: column; gap: 14px; max-height: var(--ck-list-h, 72vh); overflow-y: auto; padding: 3px 5px 3px 3px; }
.ck-vazio { margin: 8px 2px; color: var(--motryz-text-muted); font-size: var(--motryz-font-sm, .8125rem); }

/* ---------- cards ---------- */
.ck-card {
    position: relative; padding: 16px; border-radius: var(--motryz-radius-xl, 16px);
    background: var(--ck-card); border: 1px solid var(--ck-line);
    box-shadow: var(--motryz-shadow-sm); cursor: pointer;
    transition: opacity .15s, border-color .15s, box-shadow .2s, transform .15s;
}
.ck-card { border-left: 4px solid var(--ck-line); }
.ck-card:hover { border-color: rgba(var(--ck-blue-rgb), .55); box-shadow: var(--motryz-shadow-md); }
.ck-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--ck-blue-rgb), .3); border-color: var(--ck-blue); }
.ck-card[hidden] { display: none; }
.ck-card.is-sel { border-color: var(--ck-blue); box-shadow: 0 0 0 3px rgba(var(--ck-blue-rgb), .25), var(--motryz-shadow-md); }
.ck-card.is-rel { border-color: rgba(var(--ck-blue-rgb), .55); }
.ck-card.is-dim { opacity: .55; filter: saturate(.6); }
/* faixa lateral por estado */
.ck-card.is-online  { border-left-color: var(--ck-green); }
.ck-card.is-offline { border-left-color: var(--ck-red); }
.ck-card.is-pausa   { border-left-color: var(--ck-amber); }
.ck-card.ck-workflow { border-left-color: var(--ck-purple); }
.ck-card.is-run     { border-left-color: var(--ck-blue); }
.ck-card.is-agenda  { border-left-color: var(--ck-sky); }
.ck-card.is-ok      { border-left-color: var(--ck-green); }
.ck-card.is-erro    { border-left-color: var(--ck-red); }
.ck-card.is-off { background: var(--ck-card-2); }

.ck-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ck-top--exec { align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ck-tit { flex: 1 1 auto; min-width: 0; }
.ck-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ck-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--motryz-text-strong); font-weight: 700; font-size: var(--motryz-font-base, .875rem); }
.ck-nome--exec { margin-bottom: 8px; font-weight: 600; }
.ck-card:hover .ck-nome { color: var(--ck-t-blue); }
.ck-sub { margin-top: 2px; font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-muted); }
.ck-mono i { margin-right: 4px; }
.ck-ver { flex: 0 0 auto; padding: 1px 6px; border-radius: 5px; background: var(--ck-card-2); border: 1px solid var(--ck-line); color: var(--ck-sub); font-size: 10px; font-weight: 600; }

/* bloco de ícone */
.ck-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.ck-ico { position: relative; }
.ck-ico--agente { background: linear-gradient(135deg, #1f2937, #111827); color: #5eead4; box-shadow: 0 3px 8px rgba(17, 24, 39, .3); }
.ck-ico--wf { background: rgba(var(--ck-purple-rgb), .14); color: var(--ck-purple); border: 1px solid rgba(var(--ck-purple-rgb), .35); }
/* ponto de estado no canto do ícone do agente */
.ck-ico--agente::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ck-muted); border: 2px solid var(--ck-card); }
.is-online .ck-ico--agente::after { background: var(--ck-green); animation: ck-ping 1.6s infinite; }
.is-offline .ck-ico--agente::after { background: var(--ck-red); }
.is-pausa .ck-ico--agente::after { background: var(--ck-amber); }

/* pílula de estado (fundo + borda + ponto/ícone) */
.ck-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
    border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.ck-pill .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Online: ponto verde com anel que expande + texto piscando de leve */
.ck-pill.is-pulse .dot { background: var(--ck-green); box-shadow: 0 0 0 0 rgba(var(--ck-green-rgb), .6); animation: ck-ping 1.4s infinite; }
.ck-pill.is-pulse > span { animation: ck-blink 1.4s ease-in-out infinite; }
.ck-pill i.fa-solid { font-size: 11px; }
.ck-pill--ok   { background: rgba(var(--ck-green-rgb), .16); border-color: rgba(var(--ck-green-rgb), .55); color: var(--ck-t-green); }
.ck-pill--warn { background: rgba(var(--ck-amber-rgb), .16); border-color: rgba(var(--ck-amber-rgb), .55); color: var(--ck-t-amber); }
.ck-pill--erro { background: rgba(var(--ck-red-rgb), .14);   border-color: rgba(var(--ck-red-rgb), .5);    color: var(--ck-t-red); }
.ck-pill--info { background: rgba(var(--ck-blue-rgb), .14);  border-color: rgba(var(--ck-blue-rgb), .5);   color: var(--ck-t-blue); }
.ck-pill--agenda { background: rgba(var(--ck-sky-rgb), .14); border-color: rgba(var(--ck-sky-rgb), .5); color: var(--ck-t-sky); }
.ck-pill--mudo { background: rgba(100, 116, 139, .12);       border-color: rgba(100, 116, 139, .35);        color: var(--ck-sub); }

/* hardware */
.ck-hw {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; padding: 10px 12px;
    border-radius: 12px; background: var(--ck-card-2); border: 1px solid var(--ck-line);
}
.ck-hw-l { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--motryz-text-subtle); }
.ck-hw-l i { color: var(--ck-blue); margin-right: 2px; }
.ck-hw-l strong { color: var(--ck-strong); font-variant-numeric: tabular-nums; }
.ck-bar { height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(100, 116, 139, .2); overflow: hidden; }
.ck-bar > i { display: block; height: 100%; width: 0; background: var(--ck-green); transition: width .4s; }
.ck-bar > i.is-warn { background: var(--ck-amber); }
.ck-bar > i.is-erro { background: var(--ck-red); }

.ck-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-subtle); }
.ck-tempo { font-variant-numeric: tabular-nums; }
.ck-slots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.ck-slots i { width: 8px; height: 8px; border-radius: 2px; background: var(--motryz-border-strong); }
.ck-slots i.is-on { background: var(--ck-blue); }

/* workflows assinados */
.ck-assin { margin-top: 12px; }
.ck-assin-t { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--motryz-text-subtle); }
.ck-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-chip {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 6px;
    background: rgba(var(--ck-purple-rgb), .12); border: 1px solid rgba(var(--ck-purple-rgb), .35); color: var(--ck-t-purple);
    font-size: 11px; font-weight: 600;
}
.ck-chip i { font-size: 10px; }
.ck-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-chip.ck-chip--mais { background: var(--ck-card-2); border-color: var(--ck-line); color: var(--ck-sub); }

.ck-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.ck-link { font-size: var(--motryz-font-xs, .75rem); font-weight: 600; }

/* rodapé do workflow */
.ck-footbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--motryz-border-soft);
    font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-subtle);
}
.ck-footbar strong { color: var(--motryz-text-strong); }
.ck-dir { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* execução */
.ck-idw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--motryz-font-xs, .75rem); font-weight: 700; color: var(--motryz-text-strong); }
.ck-hora { margin-left: 6px; font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-muted); }
.ck-agbox {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 7px 10px;
    border-radius: 12px; background: var(--ck-card-2); border: 1px solid var(--ck-line); font-size: 11px;
}
.ck-agbox-n { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-weight: 600; color: var(--motryz-text); }
.ck-agbox-n i { color: var(--ck-teal); }
.ck-agbox-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-prog { height: 6px; border-radius: 3px; background: var(--motryz-border-soft); overflow: hidden; }
.ck-prog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ck-blue), #818cf8); transition: width .5s; }
.ck-prog.is-ok > i { background: var(--ck-green); }
.ck-prog.is-bad > i { background: var(--ck-red); }
.ck-prog.is-indet > i { width: 40%; animation: ck-indet 1.4s ease-in-out infinite; }
.ck-passos { margin-top: 6px; font-size: 11px; color: var(--motryz-text-muted); }
.ck-passos:empty { display: none; }

/* ---------- gaveta ---------- */
.ck-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .6); opacity: 0; transition: opacity .25s; }
.ck-backdrop.is-open { opacity: 1; }
.ck-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; display: flex; flex-direction: column;
    width: min(560px, 100vw); background: var(--ck-card); color: var(--motryz-text, #374151);
    border-left: 1px solid var(--motryz-border); box-shadow: var(--motryz-shadow-xl);
    transform: translateX(100%); transition: transform .25s;
}
.ck-drawer.is-open { transform: none; }
.ck-drawer[hidden], .ck-backdrop[hidden] { display: none !important; }
.ck-drawer-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--motryz-border); }
.ck-drawer-bar h5 { margin: 0; font-size: var(--motryz-font-xl, 1.125rem); color: var(--motryz-text-strong); overflow-wrap: anywhere; }
.ck-x { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: var(--motryz-radius-control, 8px); background: transparent; color: var(--motryz-text-subtle); font-size: 24px; line-height: 1; cursor: pointer; }
.ck-x:hover { background: var(--motryz-primary-bg-soft); color: var(--motryz-primary); }
.ck-x:focus-visible { outline: none; box-shadow: var(--motryz-focus-ring); }
.ck-drawer-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 16px 18px; }
.ck-drawer-head { min-width: 0; }
.ck-drawer-sub { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--motryz-font-xs, .75rem); color: var(--motryz-text-muted); overflow-wrap: anywhere; }
.ck-drawer-resumo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; font-size: var(--motryz-font-sm, .8125rem); color: var(--motryz-text-subtle); }
.ck-drawer-foot { padding: 12px 18px; border-top: 1px solid var(--motryz-border); }

/* console escuro (igual nos dois temas) */
.ck-console-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 14px; background: var(--ck-console); border: 1px solid #1e293b; overflow: hidden; }
.ck-console-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #0f172a; border-bottom: 1px solid #1e293b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; color: #34d399; }
.ck-logs { list-style: none; margin: 0; padding: 12px; flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.55; }
.ck-log { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; color: #cbd5e1; }
.ck-log-hora { color: #64748b; font-variant-numeric: tabular-nums; }
.ck-log-msg { overflow-wrap: anywhere; white-space: pre-wrap; }
.ck-log.is-alerta .ck-log-msg { color: #fbbf24; }
.ck-log.is-erro .ck-log-msg { color: #f87171; }
.ck-console-wrap + .ck-vazio, .ck-vazio.ck-vazio--console { color: #64748b; padding: 0 12px 12px; margin: 0; }
.ck-mais { margin: 8px 2px 0; font-size: var(--motryz-font-xs, .75rem); color: var(--ck-sub); text-align: center; }
.ck-rodape { margin: 16px 2px 0; font-size: var(--motryz-font-xs, .75rem); }

/* ---------- animações ---------- */
@keyframes ck-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--ck-green-rgb), .65); } 70% { box-shadow: 0 0 0 8px rgba(var(--ck-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ck-green-rgb), 0); } }
@keyframes ck-blink { 50% { opacity: .45; } }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@keyframes ck-dash { to { stroke-dashoffset: -12; } }
@keyframes ck-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ck-live.is-ok .ck-live-dot, .ck-line--run, .ck-prog.is-indet > i, .ck-pill.is-pulse .dot, .ck-pill.is-pulse > span,
    .is-online .ck-ico--agente::after, .ck-stat--run.is-on .ck-stat-ico i, .ck-pill .fa-spin { animation: none; }
    .ck-card, .ck-bar > i, .ck-prog > i, .ck-drawer, .ck-backdrop { transition: none; }
}

/* ---------- tela inteira (cobre header/menu do tema; a gaveta de logs fica acima, z-index 1100) ---------- */
body.ck-fullscreen { overflow: hidden; }
.ck-root.ck-full {
    position: fixed; inset: 0; z-index: 1085; overflow: auto; margin: 0; max-width: none; padding: 14px 18px 18px;
    background: #f4f6fb;
    --ck-list-h: calc(100vh - 215px);
}
.dark-only .ck-root.ck-full { background: #1a1d26; }
.ck-root.ck-full .ck-rodape { display: none; }
.ck-root.ck-full .ck-board { grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.1fr) minmax(300px, 1fr); }

/* ---------- responsivo ---------- */
@media (max-width: 1399px) { .ck-board { gap: 40px; } .ck-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .ck-board { gap: 28px; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(260px, 1fr); } }
@media (max-width: 991px) {
    .ck-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ck-board { grid-template-columns: 1fr; gap: 20px; padding: 12px; }
    .ck-lines { display: none; }
    .ck-list { max-height: 55vh; }
    .ck-live { margin-left: 0; }
}

/* ---------- acessibilidade (fase 7) ---------- */
/* o tema remove o contorno de foco (a:focus-visible, button:focus); sem isto quem navega por teclado não vê onde está */
.ck-root :is(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible,
.ck-drawer :is(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ck-blue); outline-offset: 2px;
}
.dark-only .ck-root :is(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible,
.dark-only .ck-drawer :is(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible { outline-color: #a5b4fc; }

/* botões de ícone com texto escuro quando o fundo do hover é âmbar, verde ou azul-claro */
.ck-root .wl-ib--editar:hover, .ck-root .wl-ib--ativar:hover, .ck-root .wl-ib--pausa:hover, .ck-root .wl-ib--sky:hover,
.ck-root .ls-ib--assinar:hover, .ck-root .ls-ib--editar:hover, .ck-root .ls-ib--pausa:hover,
.ck-root .rl-ib--rep:hover, .ck-root .sl-ib--editar:hover, .ck-root .sl-ib--pausa:hover { color: #0f172a; }

/* telas de toque: alvos de pelo menos 44 px */
@media (pointer: coarse) {
    .ck-root :is(.wl-ib, .ls-ib, .sl-ib, .rl-ib, .dc-ib, .gp-ib, .tp-ib, .ck-x, .wl-vbtn, .ls-vbtn, .sl-vbtn, .rl-vbtn, .cl-btn, .wl-pg, .rl-pg, .db-per button) { min-width: 44px; min-height: 44px; }
}

/* quem pede menos movimento não vê animação nem rolagem suave em nenhuma tela do cockpit */
@media (prefers-reduced-motion: reduce) {
    .ck-root *, .ck-root *::before, .ck-root *::after, .ck-drawer *, .ck-drawer *::before, .ck-drawer *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}