/* Início do app e indicadores da produção (PQCDSM reformado, 13/10/2026).
   Fica por cima de ds/odara-tokens.css, ds/odara-ui.css e peso.css, e usa
   os componentes deles (pe-card, pe-carta, od-tabela, od-selo). Aqui só o
   que é destas telas. Nenhuma cor nova. */

/* ── Início: os dois cards do módulo ── */
.in-inicio { max-width: 1100px; }
.in-inicio-h { margin: 0 0 var(--s-2); font-size: var(--fs-h3); font-weight: var(--w-light); letter-spacing: -.01em; }
.in-modulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.in-coluna { display: flex; flex-direction: column; gap: var(--s-3); }
.in-modulo { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--radius-lg); background: var(--bg-alt); border: 1px solid var(--line); border-top: 6px solid var(--od-vermelho); color: var(--fg1); text-decoration: none; transition: box-shadow var(--dur-1) var(--ease); }
.in-modulo:hover { box-shadow: var(--shadow-md); }
.in-modulo:focus-visible { outline: 3px solid var(--od-amarelo); outline-offset: 2px; }
.in-modulo-nome { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-light); letter-spacing: -.02em; line-height: 1.05; }
.in-modulo-nome b { font-weight: var(--w-heavy); }
.in-modulo-txt { margin: 0; color: var(--fg2); font-size: var(--fs-body); }
.in-modulo-vivo { display: grid; gap: 2px; margin-top: auto; padding-top: var(--s-3); border-top: 1px dashed var(--line-strong); min-height: 64px; }
.in-modulo-vivo b { font-family: var(--font-condensed); font-size: 32px; font-weight: var(--w-heavy); line-height: 1; font-variant-numeric: tabular-nums; }
.in-modulo-vivo span { font-size: var(--fs-body-s); color: var(--fg2); }
.in-atalhos { display: flex; gap: var(--s-2); flex-wrap: wrap; }
@media (max-width: 760px) { .in-modulos { grid-template-columns: 1fr; } .in-modulo { padding: var(--s-5); } }

/* ── Indicadores: nove cards, compactos, que cabem numa TV (14/10/2026) ──
   Duas fileiras de quatro e, à direita, a Saúde do sistema na altura das
   duas, com as seis luzes à vista. Abaixo, a faixa de avisos e oportunidades. */
.in-pilares { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); gap: var(--s-3); }
.in-pilares > [data-pilar="H"] { grid-column: 5; grid-row: 1 / span 2; }
@media (max-width: 1100px) { .in-pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); } .in-pilares > [data-pilar="H"] { grid-column: auto; grid-row: auto; } }
@media (max-width: 760px) { .in-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .in-pilares { grid-template-columns: 1fr; } }
.in-letra--icone svg { width: 14px; height: 14px; }
.in-pilar--agir .in-letra--icone, .in-pilar--atencao .in-letra--icone { color: inherit; }
/* As seis luzes do card de Saúde do sistema */
.in-h-luzes { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: 6px; }
.in-h-luzes li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body-s); line-height: 1.2; }
.in-h-luzes .in-bola { flex: none; width: 18px; height: 18px; }
.in-h-luzes .in-bola svg { width: 11px; height: 11px; }

/* Faixa abaixo dos cards: avisos à esquerda, oportunidades à direita */
.in-faixa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); align-items: start; }
.in-faixa .in-alarme { margin: 0; }
@media (max-width: 900px) { .in-faixa { grid-template-columns: 1fr; } }
.in-oport-acao { margin: var(--s-2) 0 var(--s-3); font-weight: var(--w-medium); }

/* Saúde do sistema: o quadro de bolinhas do mês */
.in-farol-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.in-farol-mes { font-size: var(--fs-h4); }
.in-farol { border-collapse: separate; border-spacing: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.in-farol th { padding: 2px 0; min-width: 24px; text-align: center; font-weight: var(--w-demibold); color: var(--fg2); }
.in-farol thead th span { display: block; font-size: 10px; font-weight: var(--w-medium); color: var(--fg3); }
.in-farol .in-farol-fds { background: var(--bg-alt); border-radius: var(--radius-sm); }
.in-farol .in-farol-q { position: sticky; left: 0; z-index: 1; min-width: 210px; max-width: 250px; padding: 4px var(--s-2) 4px 0; text-align: left; color: var(--fg1); background: var(--bg); font-size: var(--fs-body-s); line-height: 1.25; }
.in-farol td { padding: 2px; text-align: center; }
.in-farol td.od-num { min-width: 64px; padding-left: var(--s-2); white-space: nowrap; }
.in-bola { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; vertical-align: middle; }
.in-bola svg { width: 13px; height: 13px; }
.in-bola--ok { background: var(--st-sucesso); color: var(--fg-on-loud); }
.in-bola--falha { background: var(--st-erro); color: var(--fg-on-loud); }
button.in-bola--falha { cursor: pointer; }
button.in-bola--falha:hover { box-shadow: 0 0 0 3px var(--line-strong); }
.in-bola--na { width: 12px; height: 12px; background: transparent; border: 2px solid var(--line-strong); }
.in-bola--leg { width: 16px; height: 16px; margin-right: 6px; }
.in-bola--leg svg { width: 10px; height: 10px; }
.in-leg .in-bola--na.in-bola--leg { width: 12px; height: 12px; }
.in-cfg-sub { margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-body); font-weight: var(--w-demibold); }

/* ── Modo TV: só o painel, números maiores, sem filtros nem abas ── */
/* Hora atual ao lado do período, no painel e na TV */
.in-agora { display: inline-grid; justify-items: end; gap: 0; margin-right: var(--s-3); line-height: 1.1; }
.in-relogio { font-family: var(--font-condensed); font-size: 28px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
body.in-tv .pe-topo, body.in-tv .in-filtros, body.in-tv .pe-abas, body.in-tv .in-sem-tv { display: none; }
body.in-tv .in-relogio { font-size: 40px; }
body.in-tv .pe-painel-titulo { font-size: var(--fs-h3); }
body.in-tv .pe-conteudo { padding-top: var(--s-3); max-width: none; }
body.in-tv .in-pilar-num b { font-size: 44px; }
body.in-tv .in-pilar-num small { font-size: 18px; }
body.in-tv .in-pilar .pe-card-nome { font-size: var(--fs-body-l); }
body.in-tv .in-pilar-rec, body.in-tv .in-h-luzes li { font-size: var(--fs-body); }
body.in-tv .in-melhorar li:nth-child(n+5) { display: none; }
button.pe-card.in-pilar { gap: 4px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); align-content: start; }
.in-letra { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: var(--radius-pill); background: var(--fg1); color: var(--od-areia); font-family: var(--font-condensed); font-weight: var(--w-heavy); font-size: 14px; line-height: 1; vertical-align: middle; }
.in-pilar .pe-card-nome { font-size: var(--fs-body); white-space: normal; }
.in-pilar .od-selo { font-size: 11px; padding: 2px 8px; }
.in-pilar-num { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.in-pilar-num b { font-family: var(--font-condensed); font-size: 34px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.in-pilar-num small { font-family: var(--font-condensed); font-size: 15px; font-weight: var(--w-bold); }
.in-pilar-rec { font-size: var(--fs-body-s); font-weight: var(--w-medium); line-height: 1.25; }
.in-pilar-meta, .in-pilar-pe { font-size: var(--fs-caption); color: var(--fg2); line-height: 1.3; font-variant-numeric: tabular-nums; }
.in-pilar-pe { color: var(--fg3); }
.in-pilar .pe-spark { width: 100%; height: 26px; }
.in-pilar--sem { border-left-style: dashed; }
.in-pilar--sem .in-pilar-num b { color: var(--fg3); }
/* Fora da meta grita: o cartão inteiro vira vermelho; perto da meta, amarelo. */
button.pe-card.in-pilar--agir { background: var(--bg-loud); border-color: var(--bg-loud); border-left-color: var(--fg1); color: var(--fg-on-loud); }
.in-pilar--agir .in-pilar-meta, .in-pilar--agir .in-pilar-pe, .in-pilar--agir .in-pilar-rec { color: var(--fg-on-loud); }
.in-pilar--agir .pe-spark-linha { stroke: var(--fg-on-loud); }
.in-pilar--agir .pe-spark-ponto { fill: var(--fg-on-loud); }
.in-pilar--agir .in-letra { background: var(--fg-on-loud); color: var(--bg-loud); }
.in-pilar--agir .od-selo { background: var(--fg1); color: var(--fg-on-loud); }
button.pe-card.in-pilar--atencao { background: var(--bg-sun); border-color: var(--bg-sun); border-left-color: var(--fg1); color: var(--fg-on-sun); }
.in-pilar--atencao .in-pilar-meta, .in-pilar--atencao .in-pilar-pe { color: var(--fg-on-sun); }
.in-pilar--atencao .pe-spark-linha { stroke: var(--fg1); }
.in-pilar--atencao .pe-spark-ponto { fill: var(--fg1); }

/* ── Alarme: o que está fora, no topo ── */
.in-alarme { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); }
.in-alarme--agir { background: var(--bg-loud); color: var(--fg-on-loud); }
.in-alarme--atencao { background: var(--bg-sun); color: var(--fg-on-sun); }
.in-alarme--ok { background: rgba(46, 125, 92, .14); color: var(--st-sucesso); font-weight: var(--w-medium); }
.in-alarme-h { font-family: var(--font-condensed); font-size: 22px; font-weight: var(--w-heavy); text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--s-2); }
.in-alarme-itens { display: flex; flex-wrap: wrap; gap: var(--s-2); }
button.in-alarme-item { border: 0; border-radius: var(--radius-pill); padding: 6px 14px; min-height: 34px; font: inherit; font-size: var(--fs-body-s); cursor: pointer; text-align: left; }
.in-alarme-item--agir { background: var(--fg1); color: var(--fg-on-loud); }
.in-alarme-item--atencao { background: var(--bg-sun); color: var(--fg-on-sun); }
.in-alarme--atencao .in-alarme-item--atencao { background: var(--bg); }
button.in-alarme-item:hover { text-decoration: underline; }

/* Números de cabeçalho dentro do popup (custo) */
.in-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin: var(--s-2) 0 var(--s-3); }
.in-numeros > div { display: grid; gap: 2px; padding: var(--s-3); border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.in-numeros b { font-family: var(--font-condensed); font-size: 24px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.in-ruim { color: var(--st-erro); font-weight: var(--w-bold); }
.in-mais { margin-top: var(--s-4); }
.in-mais summary { cursor: pointer; font-weight: var(--w-demibold); }
.in-barra-neg { opacity: .35; }
.od-tabela tfoot td { border-top: 2px solid var(--line-strong); }

/* Contagem na aba */
.in-contagem { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--radius-pill); background: var(--bg-loud); color: var(--fg-on-loud); font-size: 12px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── Diário de bordo: a fila por turno ── */
.in-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-3); }
@media (max-width: 860px) { .in-filas { grid-template-columns: 1fr; } }
.in-fila-bloco { padding: var(--s-3) var(--s-4); border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--line); }
.in-fila-h { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.in-fila-h b { font-size: var(--fs-h4); }
.in-fila-h .od-selo { margin-left: auto; }
.in-fila { display: grid; gap: var(--s-2); }
button.in-fila-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); min-height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 5px solid var(--st-atencao); background: var(--bg); font: inherit; color: var(--fg1); text-align: left; cursor: pointer; }
button.in-fila-item:hover { box-shadow: var(--shadow-md); }
.in-fila-item--atraso { border-left-color: var(--st-erro) !important; }
.in-fila-item span { font-size: var(--fs-body-s); color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-fila-item .in-fila-acao { color: var(--fg1); font-weight: var(--w-demibold); text-decoration: underline; }
.in-fila-item--atraso .in-fila-acao { color: var(--st-erro); }
.in-diario-txt { max-width: 520px; white-space: normal; }

/* Filtros do topo */
.in-filtros { display: flex; gap: var(--s-5); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s-4); }
.in-filtros .od-campo { max-width: 160px; min-height: 40px; }
.in-datas { display: flex; gap: var(--s-2); align-items: center; }

/* Onde o apontamento trava */
.in-apont { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); }
button.in-trava { display: grid; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--line); border-left: 6px solid var(--line-strong); text-align: left; font: inherit; color: var(--fg1); cursor: pointer; }
button.in-trava:hover { box-shadow: var(--shadow-md); }
button.in-trava[disabled] { cursor: default; box-shadow: none; }
.in-trava--alerta { border-left-color: var(--st-atencao) !important; }
.in-trava--ok { border-left-color: var(--st-sucesso) !important; }
.in-trava b { font-family: var(--font-condensed); font-size: 22px; font-weight: var(--w-heavy); line-height: 1; font-variant-numeric: tabular-nums; }
.in-trava span { font-size: var(--fs-body-s); color: var(--fg2); }

/* Popup de tendência: quebra por linha e turno */
.in-quebra { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.in-meta-txt { font-size: var(--fs-caption); color: var(--fg3); }
.pe-carta .in-meta { stroke: var(--fg1); stroke-width: 1.5; stroke-dasharray: 6 4; }
.pe-carta .in-meta-rot { font-family: var(--font-condensed); font-size: 12px; fill: var(--fg1); }

/* Fechamento do turno */
.in-form { display: grid; gap: var(--s-4); }
.in-form-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 560px) { .in-form-duas { grid-template-columns: 1fr; } }
.in-form .od-campo { width: 100%; min-height: 48px; }
.in-form textarea.od-campo { min-height: 88px; }
.in-ops-turno { font-size: var(--fs-body-s); color: var(--fg2); }
.in-acoes-form { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.in-existente { font-size: var(--fs-body-s); font-weight: var(--w-demibold); }

/* ── Encontro de contas da perda, na OP ── */
.in-encontro { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.in-encontro > div { display: grid; gap: 2px; align-content: start; padding: var(--s-3); border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.in-encontro b { font-family: var(--font-condensed); font-size: 24px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; line-height: 1.05; }
.in-sinal { align-self: center; font-family: var(--font-condensed); font-size: 26px; font-weight: var(--w-heavy); color: var(--fg3); }
.in-encontro > .in-encontro-ruim { background: var(--bg-loud); border-color: var(--bg-loud); color: var(--fg-on-loud); }
.in-encontro-ruim .pe-dica, .in-encontro-ruim .od-rotulo-mini { color: var(--fg-on-loud); }
@media (max-width: 760px) { .in-encontro { grid-template-columns: 1fr; } .in-sinal { display: none; } }

/* ── Configurações ── */
.in-cfg { max-width: 1100px; }
.in-cfg .pe-sec-h { margin: var(--s-5) 0 var(--s-3); }
.in-cfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.in-cfg-campo { display: grid; gap: 4px; align-content: start; margin-bottom: var(--s-3); }
.in-cfg-entrada { display: flex; align-items: center; gap: var(--s-2); }
.in-cfg-entrada .od-campo { max-width: 200px; min-height: 44px; }
.in-cfg-entrada span { font-size: var(--fs-body-s); color: var(--fg2); }
.in-cfg textarea.od-campo { width: 100%; min-height: 72px; }

/* ── Detalhamento (popups do pilar e da OP): sem rolagem lateral (13/10/2026) ──
   Tabela justa: fonte e espaço menores, cabeçalho quebra linha. Abaixo de
   760 px cada linha vira um cartão, com o nome da coluna (data-r) ao lado
   do valor. */
.in-detalhe .pe-tabela-rola { overflow-x: visible; }
.in-detalhe .od-tabela { font-size: 13px; }
.in-detalhe .od-tabela th, .in-detalhe .od-tabela td { padding: 6px 6px; }
.in-detalhe .od-tabela th { font-size: 10px; letter-spacing: .04em; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.in-detalhe .od-tabela td.od-num { white-space: nowrap; }
.in-detalhe .od-tabela td .pe-produto-cod { font-size: 11px; }
@media (max-width: 760px) {
  .in-detalhe .od-tabela, .in-detalhe .od-tabela tbody, .in-detalhe .od-tabela tfoot, .in-detalhe .od-tabela tr, .in-detalhe .od-tabela td { display: block; width: 100%; }
  .in-detalhe .od-tabela thead { display: none; }
  .in-detalhe .od-tabela tr { padding: var(--s-2) 0; border-bottom: 1px solid var(--line-strong); }
  .in-detalhe .od-tabela td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 3px 4px; border: 0; text-align: right; white-space: normal; }
  .in-detalhe .od-tabela td::before { content: attr(data-r); flex: 0 0 auto; max-width: 45%; text-align: left; font-size: 10px; font-weight: var(--w-demibold); letter-spacing: .04em; text-transform: uppercase; color: var(--fg3); }
  .in-detalhe .od-tabela td:not([data-r])::before, .in-detalhe .od-tabela td.in-total::before { content: none; }
  .in-detalhe .od-tabela td .pe-produto-cod { display: inline; margin-left: 6px; }
  .in-detalhe .od-tabela td.od-num { white-space: normal; }
  .in-detalhe .od-tabela tfoot tr { background: var(--bg-alt); }
}

/* ── Gráficos mais claros (13/10/2026) ── */
.in-grafico .in-grade { stroke: var(--line); stroke-width: 1; }
.in-b--ok { fill: var(--st-sucesso); }
.in-b--fora { fill: var(--od-vermelho); }
.in-b--neutro { fill: var(--fg2); }
/* Período escolhido: faixa de fundo atrás das barras (as barras ficam sempre na cor cheia) */
.in-faixa-periodo { fill: rgba(0, 0, 0, .06); }
.in-leg-cor.in-leg-periodo { background: rgba(0, 0, 0, .12); }
.in-leg { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-caption); color: var(--fg2); }
.in-leg-cor { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--fg2); }
.in-leg-cor.in-b--ok { background: var(--st-sucesso); }
.in-leg-cor.in-b--fora { background: var(--od-vermelho); }
.in-leg-traco { display: inline-block; width: 16px; border-top: 2px dashed var(--fg1); margin-right: 5px; vertical-align: 3px; }

/* Barra do encontro de contas */
.in-enc { margin: var(--s-2) 0 var(--s-3); }
.in-enc-barra { display: flex; gap: 2px; height: 26px; border-radius: 4px; overflow: hidden; background: var(--line); }
.in-enc-seg { display: block; min-width: 3px; }
.in-enc-seg--ap { background: var(--fg2); }
.in-enc-seg--pe { background: var(--od-amarelo); }
.in-enc-seg--ne { background: var(--od-vermelho); }
.in-enc-seg--in { background: var(--od-tradicional); }
.in-enc-leg { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-body-s); color: var(--fg2); font-variant-numeric: tabular-nums; }
.in-enc-leg b { color: var(--fg1); }
.in-enc-cor { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.in-enc-total { margin-left: auto; }

/* Ranking de perda por OP */
.in-rank { display: grid; gap: 2px; margin-bottom: var(--s-3); }
button.in-rank-l { display: grid; grid-template-columns: minmax(0, 38%) 1fr 64px; align-items: center; gap: var(--s-2); padding: 3px 4px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--fg1); text-align: left; cursor: pointer; }
button.in-rank-l:hover { background: rgba(0, 0, 0, .04); }
.in-rank-nome { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-rank-trilho { position: relative; height: 14px; background: var(--bg); border-radius: 3px; }
.in-rank-barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg2); border-radius: 0 3px 3px 0; }
.in-rank-barra--fora { background: var(--od-vermelho); }
.in-rank-barra--neg { background: var(--st-sucesso); }
.in-rank-alarme { position: absolute; top: -3px; bottom: -3px; border-left: 2px dashed var(--fg1); }
.in-rank-v { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--w-demibold); }

/* Duas colunas no popup da OP */
.in-duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 860px) { .in-duas-colunas { grid-template-columns: 1fr; } }

/* ── Produtividade com dois números (por pessoa e por hora) ── */
.in-pilar-nums { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.in-pilar-num--2 b { font-size: 26px; }

/* ── Onde melhorar ── */
.in-melhorar { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
button.in-melhorar-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-left: 5px solid var(--od-vermelho); border-radius: var(--radius-md); background: var(--bg-alt); font: inherit; color: var(--fg1); text-align: left; cursor: pointer; }
button.in-melhorar-item:hover { box-shadow: var(--shadow-md); }
.in-melhorar-n { font-family: var(--font-condensed); font-size: 24px; font-weight: var(--w-heavy); color: var(--od-vermelho); text-align: center; }
.in-melhorar-txt { display: grid; gap: 1px; min-width: 0; }
.in-melhorar-txt span { font-size: var(--fs-body-s); color: var(--fg2); }
.in-melhorar-txt .in-melhorar-acao { color: var(--fg3); font-size: var(--fs-caption); }
.in-melhorar-v { font-family: var(--font-condensed); font-size: 24px; font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { button.in-melhorar-item { grid-template-columns: 26px minmax(0, 1fr); } .in-melhorar-v { grid-column: 2; font-size: 20px; } }

/* ── Barras clicáveis com valor em cada uma ── */
.in-grafico .in-b-alvo { fill: transparent; cursor: pointer; }
.in-grafico .in-col { cursor: pointer; }
.in-grafico .in-col:hover .in-b-alvo { fill: rgba(0, 0, 0, .05); }
.in-grafico .in-b-rot { font-family: var(--font-condensed); font-weight: 600; fill: var(--fg1); pointer-events: none; }

/* ── Standard de pessoas por linha ── */
.in-std-tab { max-width: 520px; }
.in-std-tab .od-campo { width: 90px; min-height: 40px; text-align: right; }

/* Saúde do sistema com luz vermelha: a borda avisa, o card não vira vermelho
   para as luzes continuarem legíveis. */
button.pe-card.in-pilar--h-falha { border-left-color: var(--st-erro); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* OEE em Configurações: uma tabela por SKU, rota principal e alternativa */
.in-oee-tab th.in-oee-grupo { text-align: center; border-bottom: 1px solid var(--line-strong); }
.in-oee-tab select.in-oee-linha { min-width: 76px; }
.in-oee-tab select.in-oee-garg { min-width: 190px; max-width: 260px; }
.in-oee-tab input.in-oee-nom { width: 96px; text-align: right; }
.in-oee-tab td { vertical-align: middle; }

/* Popup de um card: tendência e quebra à esquerda, detalhe à direita, numa
   tela só; o detalhe longo rola dentro da coluna dele. */
.in-pop-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-5); align-items: start; }
.in-pop-esq .in-grafico { max-height: min(50vh, 460px); }
.in-pop-dir > .pe-carta-h:first-child { margin-top: 0; }
/* Detalhe do card quase em tela cheia, com uma rolagem só: o popup e a página
   não rolam; a coluna do gráfico cabe inteira e só a do detalhe rola, com a
   barra fina. As tabelas ficam mais justas para caber mais número na tela. */
html.in-trava-pagina, html.in-trava-pagina body { overflow: hidden; }
.od-popup.in-pop-cheio { max-width: none; width: calc(100vw - 2 * var(--s-4)); height: calc(100vh - 2 * var(--s-4)); max-height: none; }
.in-pop-cheio .od-popup-topo { padding: var(--s-3) var(--s-4) var(--s-2) var(--s-5); }
.in-pop-cheio .od-popup-corpo { overflow: hidden; padding: var(--s-3) var(--s-5) var(--s-3); }
.in-pop-cheio .in-detalhe, .in-pop-cheio .in-pop-grade { height: 100%; }
.in-pop-cheio .in-pop-esq { height: 100%; overflow: hidden; }
.in-pop-cheio .in-pop-dir { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.in-pop-cheio .pe-tabela-rola { overflow-y: visible; }
.in-pop-cheio .pe-carta-h { margin: var(--s-3) 0 var(--s-1); }
.in-pop-cheio .od-tabela th { padding: 4px 8px; }
.in-pop-cheio .od-tabela td { padding: 5px 8px; font-size: var(--fs-body-s); line-height: 1.25; }
.in-pop-cheio .od-tabela .pe-produto-cod { font-size: 11px; }
.in-pop-cheio .in-quebra { margin-top: var(--s-2); gap: var(--s-3); }
.in-pop-cheio .in-numeros { margin: var(--s-1) 0 var(--s-2); }
.in-pop-cheio .in-numeros > div { padding: var(--s-2) var(--s-3); }
@media (max-height: 820px) { .in-pop-esq .in-grafico { max-height: 360px; } }
/* Tela estreita: uma coluna, e aí quem rola é o popup (ainda uma barra só). */
@media (max-width: 1100px) {
  .in-pop-grade { grid-template-columns: 1fr; }
  .in-pop-cheio .od-popup-corpo { overflow-y: auto; }
  .in-pop-cheio .in-detalhe, .in-pop-cheio .in-pop-grade, .in-pop-cheio .in-pop-esq, .in-pop-cheio .in-pop-dir { height: auto; overflow: visible; }
}
@media (max-width: 760px) { #btn-tv { display: none; } }
.in-pop-cheio .od-tabela a.pe-link { white-space: nowrap; }
.in-pop-cheio .od-tabela td:first-child .pe-produto-cod { white-space: nowrap; }
.in-th-dica { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Coluna do gráfico em tela larga: o gráfico fica com a altura que sobra
   depois do cabeçalho, da legenda e da quebra por linha e turno, que assim
   aparecem sempre inteiras (19/10/2026: a quebra ficava cortada). */
@media (min-width: 1101px) {
  .in-pop-cheio .in-pop-esq { display: flex; flex-direction: column; }
  .in-pop-cheio .in-pop-esq > * { flex: 0 0 auto; }
  .in-pop-cheio .in-pop-esq > .in-grafico { flex: 1 1 0; height: 0; min-height: 160px; max-height: none; width: 100%; }
}

/* Tendência em linha com pontos (19/10/2026), desenhada no tamanho da caixa */
.in-graf { width: 100%; height: 300px; position: relative; }
.in-graf svg { display: block; }
.in-graf .in-grade { stroke: var(--line); stroke-width: 1; }
.in-graf .in-grade--zero { stroke: var(--line-strong); }
.in-graf .pe-eixo { font-family: var(--font-condensed); font-size: 12px; fill: var(--fg3); }
.in-graf .in-meta { stroke: var(--fg1); stroke-width: 1.5; stroke-dasharray: 6 4; }
.in-graf .in-meta-rot { font-family: var(--font-condensed); font-size: 12px; fill: var(--fg1); }
.in-graf .in-linha-graf { fill: none; stroke: var(--fg3); stroke-width: 2; stroke-linejoin: round; }
.in-graf .in-ponto { stroke: var(--bg-alt); stroke-width: 2; }
.in-ponto--ok { fill: var(--st-sucesso); background: var(--st-sucesso); }
.in-ponto--fora { fill: var(--od-vermelho); background: var(--od-vermelho); }
.in-ponto--neutro { fill: var(--fg1); background: var(--fg1); }
.in-graf .in-b-alvo { fill: transparent; cursor: pointer; }
.in-graf .in-col { cursor: pointer; }
.in-graf .in-col:hover .in-b-alvo { fill: rgba(0, 0, 0, .05); }
.in-graf .in-col:hover .in-ponto { r: 7; }
.in-graf .in-b-rot { font-family: var(--font-condensed); font-weight: 600; fill: var(--fg1); pointer-events: none; }
.in-leg-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
@media (min-width: 1101px) {
  .in-pop-cheio .in-pop-esq > .in-graf { flex: 1 1 0; height: 0; min-height: 200px; }
}
.in-graf .in-b-rot { paint-order: stroke; stroke: var(--bg-alt); stroke-width: 4px; stroke-linejoin: round; }

/* Aba Produtos: evolução da perda em miniatura */
.in-mini { display: block; }
.in-mini-linha { fill: none; stroke: var(--fg3); stroke-width: 1.5; }
.in-mini-meta { stroke: var(--fg1); stroke-width: 1; stroke-dasharray: 4 3; }
.in-mini circle { stroke: var(--bg-alt); stroke-width: 1; }
.in-ponto--ok { fill: var(--st-sucesso); }
.in-ponto--fora { fill: var(--od-vermelho); }
.in-ponto--neutro { fill: var(--fg1); }
.in-prod-tab td { vertical-align: middle; }
.in-bom { color: var(--st-sucesso); font-weight: var(--w-bold); }