/* Indicadores da qualidade (iq-) e plano de controle de cada setor (pl-), 10/11/2026. Tokens do Nexus nos dois temas.
   Regra de alinhamento da dona: cada família de indicadores é uma faixa de largura inteira (12 colunas: 6 cartões de 2,
   4 de 3, 3 de 4); cartões da mesma faixa têm a mesma altura e o valor, a régua e o rodapé na mesma linha. */
.iq { display: grid; gap: 18px; min-width: 0; }
.iq-recorte { min-width: 260px; }

/* ---------- placar ---------- */
.iq-placar { position: relative; isolation: isolate; display: grid; gap: 14px; overflow: hidden; padding: 18px 22px 20px; border-radius: 18px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nx-teal-500) 26%, transparent), transparent 55%), linear-gradient(135deg, #071a24, #0b2a38 55%, #0f4f5c); color: #e8f3f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.iq-placar::after { position: absolute; top: -48px; right: -36px; z-index: -1; width: 250px; aspect-ratio: 847 / 946; background: url("../comum/marca/pin-sistema.png") no-repeat center / contain; opacity: 0.1; content: ""; pointer-events: none; }
.iq-placar__cab { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.iq-placar__cab small { color: #7fd6cf; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.iq-placar__cab span { color: #8fb0ba; font-size: 11.5px; }
.iq-placar__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch; }
.iq-placar__lado, .iq-placar__foco { min-width: 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px); }
.iq-placar__lado { display: flex; gap: 14px; align-items: center; }
.iq-placar__lado > div { display: grid; gap: 3px; min-width: 0; }
.iq-placar__lado small, .iq-placar__foco > small { color: #9dbcc5; font-size: 11px; font-weight: 700; }
.iq-placar__lado b { color: #fff; font-size: 19px; letter-spacing: -0.01em; }
.iq-leg { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; color: #b8cfd6; font-size: 11.6px; list-style: none; }
.iq-leg li { display: flex; gap: 7px; align-items: center; }
.iq-leg li::before { width: 7px; height: 7px; border-radius: 50%; content: ""; }
.iq-leg--warn::before { background: #f0b429; } .iq-leg--crit::before { background: #ff6b5e; } .iq-leg--na::before { background: rgba(255, 255, 255, 0.32); }
.iq-anel { flex: none; width: 96px; height: 96px; }
.iq-anel circle { fill: none; stroke-width: 9; transform: rotate(-90deg); transform-origin: 54px 54px; }
.iq-anel__fundo { stroke: rgba(255, 255, 255, 0.1); }
.iq-anel__ok { stroke: #37c08a; } .iq-anel__warn { stroke: #f0b429; } .iq-anel__crit { stroke: #ff6b5e; } .iq-anel__na { stroke: rgba(255, 255, 255, 0.28); }
.iq-anel text { fill: #fff; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.iq-anel .iq-anel__de { fill: #9dbcc5; font-size: 10px; font-weight: 600; }
.iq-placar__foco { display: grid; align-content: start; gap: 6px; }
.iq-placar__foco ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.iq-placar__foco button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: #e8f3f5; font: inherit; font-size: 12.4px; text-align: left; cursor: pointer; }
.iq-placar__foco button:hover, .iq-placar__foco button:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.iq-placar__foco button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-placar__foco button b { font-variant-numeric: tabular-nums; }
.iq-placar__foco p { margin: 0; color: #b8cfd6; font-size: 12.4px; }
.iq-placar .iq-ponto { margin: 0; }
.iq-ponto--warn { --iq-cor: #f0b429; } .iq-ponto--crit { --iq-cor: #ff6b5e; }

/* ---------- famílias e cartões ---------- */
.iq-lado { display: grid; gap: 4px; }
.iq-familia { container-type: inline-size; }
.iq-familia > header { display: flex; gap: 8px; align-items: center; margin: 12px 0 9px; }
.iq-familia > header .pi { display: grid; width: 24px; height: 24px; border-radius: 7px; background: var(--nx-info-bg); color: var(--nx-teal-600); font-size: 12px; place-items: center; }
.iq-familia > header b { font-size: 13.2px; }
.iq-familia > header span { margin-left: auto; color: var(--nx-ink-3); font-size: 11.6px; font-weight: 600; }
.iq-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.iq-grade > * { grid-column: span 3; }
.iq-grade--6 > * { grid-column: span 2; } .iq-grade--4 > * { grid-column: span 3; } .iq-grade--3 > * { grid-column: span 4; } .iq-grade--2 > * { grid-column: span 6; }
@container (max-width: 1180px) { .iq-grade--6 > * { grid-column: span 4; } }
@container (max-width: 860px) { .iq-grade--4 > *, .iq-grade--6 > * { grid-column: span 6; } .iq-grade--3 > * { grid-column: span 6; } }
@container (max-width: 520px) { .iq-grade > * { grid-column: span 12 !important; } }

.iq-card { --iq-cor: var(--nx-ink-4); position: relative; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 7px; min-width: 0; overflow: hidden; padding: 12px 14px 11px 16px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: var(--nx-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.iq-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--iq-cor); content: ""; }
.iq-card:hover, .iq-card:focus-visible { border-color: var(--nx-line-2); box-shadow: 0 10px 24px -14px rgba(8, 30, 40, 0.45); outline: none; transform: translateY(-1px); }
.iq-card:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-teal-500) 35%, transparent); }
.iq-card--ok { --iq-cor: var(--nx-ok); } .iq-card--warn { --iq-cor: var(--nx-warn); } .iq-card--crit { --iq-cor: var(--nx-crit); }
.iq-card__topo { display: flex; gap: 6px; align-items: center; }
.iq-card__topo code { color: var(--nx-ink-4); font-family: var(--nx-ff-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.04em; }
.iq-card__topo em { padding: 0 6px; border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 9.5px; font-style: normal; font-weight: 700; }
.iq-ponto { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--iq-cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--iq-cor) 18%, transparent); }
.iq-card__nome { align-self: start; font-size: 12.6px; font-weight: 650; line-height: 1.32; }
.iq-card__valor { display: flex; gap: 4px; align-items: baseline; min-width: 0; }
.iq-card__valor strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.iq-card--warn .iq-card__valor strong { color: var(--nx-warn); } .iq-card--crit .iq-card__valor strong { color: var(--nx-crit); } .iq-card--na .iq-card__valor strong { color: var(--nx-ink-4); }
.iq-card__valor small { color: var(--nx-ink-3); font-size: 11.5px; font-weight: 600; }
.iq-faisca { flex: none; width: 64px; height: 22px; margin-left: auto; align-self: center; }
.iq-faisca path { fill: none; stroke: var(--iq-cor); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.iq-faisca circle { fill: var(--iq-cor); }
.iq-faisca--vazia { display: block; }
.iq-regua { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--nx-surface-2); }
.iq-regua i { display: block; height: 100%; border-radius: inherit; background: var(--iq-cor); }
.iq-regua b { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--nx-ink-2); }
.iq-card__pe { display: flex; gap: 8px; justify-content: space-between; min-width: 0; color: var(--nx-ink-3); font-size: 10.8px; }
.iq-card__pe span { white-space: nowrap; }
.iq-card__pe span:last-child { overflow: hidden; text-align: right; text-overflow: ellipsis; }

/* ---------- gaveta do indicador ---------- */
.iq-det { display: grid; gap: 18px; }
.iq-det__agora { --iq-cor: var(--nx-ink-4); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; border-left: 4px solid var(--iq-cor); border-radius: 14px; background: var(--nx-surface-2); }
.iq-det__agora > div { display: grid; gap: 4px; justify-items: start; }
.iq-det__agora small { color: var(--nx-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.iq-det__agora strong { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; }
.iq-det__agora strong span { margin-left: 4px; color: var(--nx-ink-3); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.iq-det__agora dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.iq-det__agora dt { color: var(--nx-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.iq-det__agora dd { margin: 2px 0 0; font-size: 13px; font-weight: 650; }
.iq-meses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.iq-mes { display: grid; grid-template-rows: 110px auto auto; gap: 3px; text-align: center; }
.iq-mes > span { position: relative; display: block; border-radius: 8px; background: var(--nx-surface-2); }
.iq-mes i { position: absolute; right: 22%; bottom: 0; left: 22%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--nx-teal-400, var(--nx-teal-500)), var(--nx-teal-600)); }
.iq-mes b { position: absolute; right: 8%; left: 8%; height: 2px; border-radius: 1px; background: var(--nx-ink-2); }
.iq-mes small { color: var(--nx-ink-3); font-size: 11px; text-transform: capitalize; }
.iq-mes em { font-size: 11.6px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.iq-mes--vazio em { color: var(--nx-ink-4); font-weight: 500; }
.iq-formula { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--nx-info-bg); font-size: 12.8px; line-height: 1.55; }
.iq-por a { display: inline-flex; gap: 7px; align-items: center; color: var(--nx-ink); text-decoration: none; }
.iq-por a:hover { color: var(--nx-teal-600); }
.iq-por--on td { background: var(--nx-info-bg); }
.iq-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; padding-top: 4px; border-top: 1px dashed var(--nx-line-2); }
.iq-meta h4 { grid-column: 1 / -1; }
.iq-meta label { display: grid; gap: 4px; color: var(--nx-ink-3); font-size: 11.4px; font-weight: 650; }
.iq-meta .nx-btn { justify-self: start; }
.iq-meta .eq-erro { grid-column: 1 / -1; }

/* ---------- vistas de um ponto de controle (fila, plano, indicadores) ---------- */
.pl-vistas { display: inline-flex; gap: 2px; justify-self: start; max-width: 100%; overflow-x: auto; padding: 4px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); }
.pl-vista { display: inline-flex; flex: none; gap: 7px; align-items: center; padding: 7px 14px; border: 0; border-radius: 9px; background: none; color: var(--nx-ink-2); font: inherit; font-size: 12.8px; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.pl-vista:hover { background: var(--nx-surface-2); }
.pl-vista b { padding: 0 7px; border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.pl-vista--on, .pl-vista--on:hover { background: var(--nx-ink); color: var(--nx-bg); }
.pl-vista--on b { background: color-mix(in srgb, var(--nx-bg) 20%, transparent); color: inherit; }
.iq--ponto { gap: 0; }

/* ---------- plano de controle ---------- */
.pl-regra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--nx-line); border-radius: 16px; background: var(--nx-surface); }
.pl-regra__item { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 14px 16px; border-left: 1px solid var(--nx-line); }
.pl-regra__item:first-child { border-left: 0; }
.pl-regra__item small { color: var(--nx-teal-600); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pl-regra__item b { font-size: 14.5px; letter-spacing: -0.01em; }
.pl-regra__item > span { color: var(--nx-ink-3); font-size: 12px; line-height: 1.45; }
.pl-medidor { display: inline-block; width: 64px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); vertical-align: middle; }
.pl-medidor i { display: block; height: 100%; border-radius: inherit; background: var(--nx-teal-500); }
.pl-medidor--largo { display: block; width: 100%; margin: 3px 0 2px; }
.pl-pr { padding: 0; overflow: hidden; }
.pl-pr summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; list-style: none; }
.pl-pr summary::-webkit-details-marker { display: none; }
.pl-pr summary:hover { background: var(--nx-surface-2); }
.pl-pr summary code { padding: 2px 8px; border-radius: 6px; background: var(--nx-surface-2); color: var(--nx-ink-2); font-size: 11.5px; white-space: nowrap; }
.pl-pr summary b { min-width: 0; font-size: 13.5px; }
.pl-pr__conta { display: flex; gap: 8px; align-items: center; color: var(--nx-ink-3); font-size: 12px; white-space: nowrap; }
.pl-pr__seta { color: var(--nx-ink-3); transition: transform 0.18s ease; }
.pl-pr[open] .pl-pr__seta { transform: rotate(180deg); }
.pl-pr__corpo { padding: 0 16px 16px; border-top: 1px solid var(--nx-line); }
.pl-obj { margin: 12px 0; color: var(--nx-ink-2); font-size: 12.8px; line-height: 1.55; }
.pl-tab td { line-height: 1.5; vertical-align: top; }
.pl-tab td:nth-child(2) { min-width: 170px; }
.pl-tab td:nth-child(2) small { display: block; color: var(--nx-ink-3); font-size: 11px; }
.pl-tab td:nth-child(3) { min-width: 170px; color: var(--nx-ink-2); }
.pl-tab td:nth-child(4) { min-width: 300px; }
.pl-n { color: var(--nx-ink-4); font-family: var(--nx-ff-mono, "JetBrains Mono", monospace); font-size: 11.4px; white-space: nowrap; }
.pl-freq { white-space: nowrap; }
.pl-falta td { background: color-mix(in srgb, var(--nx-warn) 6%, transparent); }
.pl-lido { padding: 0 6px; border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-ink-3); font-size: 10.4px; font-weight: 600; white-space: nowrap; }
.pl-pe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 6px; }
.pl-lista { margin: 0; padding-left: 18px; color: var(--nx-ink-2); font-size: 12.6px; line-height: 1.6; }

@media (max-width: 1100px) { .iq-placar__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .iq-placar__foco { grid-column: 1 / -1; } .pl-regra { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-regra__item:nth-child(3) { border-left: 0; } .pl-regra__item:nth-child(n+3) { border-top: 1px solid var(--nx-line); } }
@media (max-width: 700px) {
    .iq-placar__corpo, .pl-regra, .pl-pe { grid-template-columns: minmax(0, 1fr); } .pl-regra__item { border-left: 0; border-top: 1px solid var(--nx-line); } .pl-regra__item:first-child { border-top: 0; }
    .iq-det__agora, .iq-det__agora dl { grid-template-columns: minmax(0, 1fr); } .iq-recorte { min-width: 0; flex: 1 1 100%; }
    .pl-pr summary { grid-template-columns: minmax(0, 1fr) 18px; } .pl-pr summary code, .pl-pr__conta { grid-column: 1; }
}
@media print { .iq-card { break-inside: avoid; } .pl-vistas, .iq-recorte { display: none; } .pl-pr { break-inside: avoid; } }