/* Impressão — regra genérica para telas com botão "Imprimir". O resto do
   visual vem do Tailwind (views/partials/head.ejs). */
.only-print { display: none; }
@media print {
    .no-print { display: none; }
    .only-print { display: block; }
}

/* Indicador de conexão no topo (layout.ejs + js/conexao.js). Header é
   sempre grafite, então as cores não mudam com o tema. */
.conexao-chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 18rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .78rem; font-weight: 500; text-decoration: none; color: #e5e7eb; background: rgba(255,255,255,.08); white-space: nowrap; }
.conexao-chip:hover { background: rgba(255,255,255,.14); color: #fff; }
.conexao-chip .conexao-ponto { width: .55rem; height: .55rem; border-radius: 999px; flex: none; background: #9ca3af; }
.conexao-chip [data-texto] { overflow: hidden; text-overflow: ellipsis; }
.conexao-ok .conexao-ponto { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.conexao-aviso .conexao-ponto { background: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,.25); }
.conexao-aviso { color: #fde68a; }
.conexao-erro .conexao-ponto { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.25); }
.conexao-erro { color: #fecaca; }

/* Fluxo da linha / sinótico (js/fluxo.js). Tema claro padrão; .dark no <html>. */
.fx { display: block; font-family: Poppins, ui-sans-serif, system-ui, sans-serif; }
.fx .fx-caixa { fill: #fff; stroke: #D7D7D7; stroke-width: 1.5; }
.fx .fx-no-contagem .fx-caixa { stroke: #00A9CE; }
.fx .fx-no-apontamento .fx-caixa { fill: #F4F1E8; stroke: #B5AE96; }
.fx .fx-no-monitoramento .fx-caixa { stroke-dasharray: 5 4; }
.fx .fx-alerta .fx-caixa { stroke: #D97706; stroke-width: 2.5; fill: #FFFBEB; }
.fx .fx-destaque .fx-caixa { stroke: #DC2626; stroke-width: 3; fill: #FEF2F2; }
.fx .fx-sem-sinal { opacity: .55; }
.fx .fx-nome { font-size: 14.5px; font-weight: 600; fill: #2B313A; }
.fx .fx-valor { font-size: 23px; font-weight: 700; fill: #2B313A; font-variant-numeric: tabular-nums; }
.fx .fx-tipo { font-size: 14px; fill: #424851; }
.fx .fx-pe { font-size: 13px; fill: #6B7280; }
.fx .fx-alerta .fx-pe { fill: #B45309; font-weight: 600; }
.fx .fx-destaque .fx-pe, .fx .fx-marca { fill: #DC2626; font-weight: 700; }
.fx .fx-marca { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.fx .fx-aresta { fill: none; stroke: #9CA3AF; stroke-width: 2; }
.fx .fx-aresta-desvio { stroke: #D97706; stroke-dasharray: 6 5; }
.fx .fx-aresta-retorno { stroke: #00A9CE; stroke-dasharray: 2 5; }
.fx .fx-seta { fill: #9CA3AF; }
.fx .fx-rotulo { font-size: 12.5px; fill: #6B7280; font-family: ui-monospace, monospace; }
.fx a:hover .fx-caixa { stroke-width: 3; }
.dark .fx .fx-caixa { fill: #363C45; stroke: #5A616B; }
.dark .fx .fx-no-contagem .fx-caixa { stroke: #00CEFB; }
.dark .fx .fx-no-apontamento .fx-caixa { fill: #3B3D3A; stroke: #8F8A78; }
.dark .fx .fx-alerta .fx-caixa { stroke: #F59E0B; fill: #45391F; }
.dark .fx .fx-destaque .fx-caixa { stroke: #F87171; fill: #4A2A2A; }
.dark .fx .fx-nome, .dark .fx .fx-valor { fill: #fff; }
.dark .fx .fx-tipo { fill: #D7D7D7; }
.dark .fx .fx-pe, .dark .fx .fx-rotulo { fill: #A9ADB3; }
.dark .fx .fx-alerta .fx-pe { fill: #FCD34D; }
.dark .fx .fx-destaque .fx-pe, .dark .fx .fx-marca { fill: #FCA5A5; }
.dark .fx .fx-aresta { stroke: #6B7280; }
.dark .fx .fx-seta { fill: #6B7280; }
.dark .fx .fx-aresta-desvio { stroke: #F59E0B; }
.dark .fx .fx-aresta-retorno { stroke: #00CEFB; }

/* Quadro semanal da grade de horários (js/grade_semana.js, portado da OEE Box) */
.qs { display: grid; gap: .3rem; font-size: .7rem; }
.qs-linha { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; }
.qs-dia { color: #6B7280; font-weight: 600; }
.qs-faixa { position: relative; height: 1.4rem; border-radius: .4rem; background-color: #F3F4F6; }
.qs-eixo .qs-faixa { height: .875rem; background: none; }
.qs-eixo .qs-faixa span { position: absolute; top: 0; transform: translateX(-50%); color: #9CA3AF; }
.qs-eixo .qs-faixa span:first-child { transform: none; }
.qs-eixo .qs-faixa span:last-child { transform: translateX(-100%); }
.qs-bloco { position: absolute; top: 2px; bottom: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid; border-radius: .3rem; padding: 0 .3rem; line-height: calc(1.4rem - 6px); font-weight: 600; }
.qs-intervalo { position: absolute; top: 2px; bottom: 2px; border-radius: .2rem; background: repeating-linear-gradient(135deg, rgba(43,49,58,.45) 0 3px, transparent 3px 6px); }
.qs-cruza { position: absolute; top: 0; bottom: 0; border: 2px solid #DC2626; border-radius: .3rem; }
.dark .qs-dia { color: #9CA3AF; }
.dark .qs-faixa { background-color: rgba(255,255,255,.05); }
.dark .qs-eixo .qs-faixa { background: none; }
.dark .qs-intervalo { background: repeating-linear-gradient(135deg, rgba(0,0,0,.55) 0 3px, transparent 3px 6px); }
.qs-cor-0 { background: #BFDBFE; border-color: #60A5FA; color: #1E3A8A; }
.qs-cor-1 { background: #A7F3D0; border-color: #34D399; color: #064E3B; }
.qs-cor-2 { background: #DDD6FE; border-color: #A78BFA; color: #4C1D95; }
.qs-cor-3 { background: #FDE68A; border-color: #F59E0B; color: #78350F; }
.qs-cor-4 { background: #FBCFE8; border-color: #F472B6; color: #831843; }
.qs-cor-5 { background: #A5F3FC; border-color: #22D3EE; color: #164E63; }
.dark .qs-cor-0 { background: rgba(96,165,250,.35); border-color: #60A5FA; color: #DBEAFE; }
.dark .qs-cor-1 { background: rgba(52,211,153,.3); border-color: #34D399; color: #D1FAE5; }
.dark .qs-cor-2 { background: rgba(167,139,250,.35); border-color: #A78BFA; color: #EDE9FE; }
.dark .qs-cor-3 { background: rgba(245,158,11,.3); border-color: #F59E0B; color: #FEF3C7; }
.dark .qs-cor-4 { background: rgba(244,114,182,.3); border-color: #F472B6; color: #FCE7F3; }
.dark .qs-cor-5 { background: rgba(34,211,238,.3); border-color: #22D3EE; color: #CFFAFE; }