/* Giro OPPO · camada de tela sobre o base.css (design Ramsons) */
@font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

@layer telas {
  :root { --raio: 8px; --raio-p: 6px; --raio-xs: 4px; --sombra-1: none; --fonte-logo: "Chillax", var(--fonte); }
  body { overflow-wrap: break-word; }

  /* logo de produto em Chillax */
  .logo-txt { display: grid; line-height: 1; text-decoration: none; color: var(--texto); min-width: 0; }
  .logo-txt .nome { font: 600 21px/1 var(--fonte-logo); letter-spacing: -.01em; }
  .logo-g { display: none; width: 34px; height: 34px; border-radius: var(--raio-p); background: var(--prim-fundo); color: var(--prim-texto); font: 600 18px/34px var(--fonte-logo); text-align: center; }
  .casca.recolhida .logo-txt { display: none; }
  .casca.recolhida .logo-g { display: block; }
  @media (max-width: 900px) { .casca.recolhida .logo-txt { display: grid; } .casca.recolhida .logo-g { display: none; } }
  .tema-seg { width: 100%; } .tema-seg button { flex: 1; padding: 0 6px; }
  .lateral .pe .nav-item { margin-top: var(--e2); }

  /* sem faixa colorida lateral nem sombra (padrão Rodrigo) */
  .alerta, .alerta.queda, .alerta.atencao, .alerta.info { border-left: 1px solid var(--linha); }
  .delta, .tag, .kpi .periodo { border-radius: var(--raio-xs); }
  .seg { border-radius: var(--raio-p); } .seg button { border-radius: var(--raio-xs); }
  .pill-f { border-radius: var(--raio-p); }
  .chip-filtro { border-radius: var(--raio-xs); }
  .colunas .col i { border-radius: 3px 3px 1px 1px; }

  .topo-app .ref { font-size: 12.5px; color: var(--fraco); white-space: nowrap; }
  .topo-app .resumo-filtro { cursor: pointer; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
  body.rolou .topo-app .resumo-filtro:not(:empty) { display: inline-flex; }
  @media (max-width: 640px) { .topo-app .ref { display: none; } body.rolou .topo-app .resumo-filtro { max-width: 52vw; } }

  .saudacao h2 { font-size: 20px; letter-spacing: -.01em; }
  .saudacao p { max-width: 900px; }

  /* filtros */
  .filtro-cab { gap: var(--e3) var(--e5); }
  .fc-grupo { min-width: 0; }
  .fc-grupo select.campo { min-width: 200px; max-width: 100%; }
  .fc-ativos:empty { display: none; }
  .fc-rodape { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; width: 100%; }
  .fc-rodape .fc-limpar { margin-left: auto; }
  @media (max-width: 640px) {
    .filtro-cab { padding: var(--e3) var(--e4); }
    .fc-grupo, .fc-grupo select.campo { width: 100%; }
    .seg.jan { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  }

  /* KPI */
  .kpi b { font-size: clamp(22px, 11cqi, 34px); }
  .kpi .topo { flex-wrap: wrap; row-gap: 4px; }
  .kpi .periodo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .kpi .sub { font-size: 12.5px; color: var(--fraco); }
  .spark { display: block; width: 100%; height: 30px; margin-top: 2px; }

  /* giro por janela */
  .giro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .giro > div { padding: 4px var(--e4); border-left: 1px solid var(--linha); display: grid; gap: 4px; align-content: start; min-width: 0; }
  .giro > div:first-child { border-left: 0; padding-left: 0; }
  .giro .j { font-size: 12px; font-weight: 700; color: var(--suave); }
  .giro b { font-size: clamp(20px, 7cqi, 28px); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .giro .dia { font-size: 13px; color: var(--suave); }
  .giro .dia strong { color: var(--texto); font-variant-numeric: tabular-nums; }
  .giro > div.sel { background: var(--superficie-2); border-radius: var(--raio-p); padding-left: var(--e4); }
  .giro > div.sel:first-child { padding-left: var(--e4); }
  .nota { font-size: 12px; color: var(--fraco); margin: var(--e3) 0 0; }
  @container (max-width: 560px) {
    .giro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) 0; }
    .giro > div:nth-child(3) { border-left: 0; padding-left: 0; }
    .giro > div.sel:nth-child(3) { padding-left: var(--e4); }
  }

  /* colunas: projeção (cinza, rótulo por fora) e pares (ano atual × anterior) */
  .colunas .col.proj i { background: repeating-linear-gradient(135deg, var(--referencia) 0 4px, color-mix(in srgb, var(--referencia) 70%, transparent) 4px 8px); }
  .colunas .col.proj em.fora { color: var(--fraco); font-weight: 600; }
  .colunas .col.dom > i { opacity: .8; }
  .colunas-eixo span { white-space: nowrap; overflow: visible; font-size: clamp(9.5px, calc(100cqi / var(--n, 12) * .5), 11.5px); }
  .colunas-eixo span.dom { color: var(--texto); font-weight: 700; }
  .colunas.pares { gap: clamp(6px, 2cqi, 16px); }
  .colunas.pares .grupo { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; min-width: 0; }
  .colunas.pares .col.ant i { background: var(--referencia); }
  .colunas.pares .col.ant i em { color: #111827; text-shadow: none; }
  .legenda-linha { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: 12.5px; color: var(--suave); }
  .legenda-linha i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
  .eixo-pares { gap: clamp(6px, 2cqi, 16px); }

  /* barras horizontais */
  .barras-h .item { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; }
  .barras-h a.nome, .barras-h button.nome { color: var(--texto); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
  .barras-h a.nome:hover, .barras-h button.nome:hover { text-decoration: underline; }
  .barras-h .valor small { color: var(--fraco); font-weight: 600; }
  .barras-h .valor small.sobe { color: var(--ok); } .barras-h .valor small.desce { color: var(--erro); }
  @container (max-width: 380px) { .barras-h .item { grid-template-columns: minmax(0, 1fr) auto; } .barras-h .trilho { grid-column: 1 / -1; grid-row: 2; } }

  /* cor do aparelho */
  .cor { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); white-space: nowrap; }
  .cor i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #0003; flex: none; }
  .barra-100 { height: 26px; border-radius: var(--raio-xs); }
  .barra-100 i { font-size: 11.5px; }

  /* tabelas */
  .tabela th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
  .tabela th button:focus-visible { outline: 2px solid var(--foco); }
  .tabela th[aria-sort] { color: var(--texto); }
  .tabela td.forte { font-weight: 700; }
  .tabela td .fraco, .fraco { color: var(--fraco); }
  .tabela tr.clica { cursor: pointer; }
  .tabela .prod { display: grid; gap: 2px; min-width: 190px; }
  .tabela .prod b { font-weight: 600; }
  .tabela td.sel, .tabela th.sel { background: color-mix(in srgb, var(--info-suave) 55%, transparent); }
  .tag.neutro { background: var(--superficie-2); color: var(--suave); border: 1px solid var(--linha); }
  .busca { min-width: 220px; flex: 1 1 220px; max-width: 360px; }
  @media (max-width: 640px) {
    .tabela.vira-cartao tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
    .tabela.vira-cartao td:first-child { grid-column: 1 / -1; }
    .tabela.vira-cartao td.num { text-align: left; }
    .tabela.vira-cartao td[data-rot]::before { display: block; }
    .tabela.vira-cartao td.sel { background: none; }
    .tabela .prod { min-width: 0; }
    .busca { max-width: none; }
  }

  /* modelos e cores */
  .modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
  @media (max-width: 1199px) { .modelos { grid-template-columns: 1fr; } }
  .modelo-cab { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
  .modelo-cab h3 { margin: 0; font-size: 15px; }
  .modelo-cab .tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
  .modelo-cab .tot small { font-weight: 500; color: var(--fraco); margin-left: 6px; }
  .mini { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: var(--e3); }
  .mini th { font-size: 11.5px; color: var(--fraco); font-weight: 600; text-align: right; padding: 4px 6px; }
  .mini th:first-child, .mini td:first-child { text-align: left; padding-left: 0; }
  .mini td { padding: 6px; border-top: 1px solid var(--linha); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mini td.sobe { color: var(--ok); font-weight: 600; } .mini td.desce { color: var(--erro); font-weight: 600; }
  @container (max-width: 460px) { .mini .so-largo { display: none; } }

  .voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: 13px; }
  .voltar:hover { color: var(--texto); }
  .detalhe-cab { display: grid; gap: 6px; }
  .detalhe-cab h2 { font-size: 20px; }

  /* sem vermelho de marca: projeto só OPPO */
  .nav-item[aria-current="page"]::before { background: var(--texto); }

  /* tabelas: destaque ao passar e linhas verticais */
  .tabela th, .tabela td { border-right: 1px solid var(--linha); }
  .tabela th:last-child, .tabela td:last-child { border-right: 0; }
  .tabela tbody tr:hover, .mini tbody tr:hover { background: color-mix(in srgb, var(--info-suave) 70%, var(--superficie)); }
  .tabela tbody tr:hover td.sel { background: transparent; }
  .mini { border: 1px solid var(--linha); }
  .mini-caixa { overflow-x: auto; overscroll-behavior-x: contain; margin-top: var(--e3); }
  .mini-caixa .mini { margin-top: 0; }
  .mini th, .mini td { border-right: 1px solid var(--linha); padding: 6px 8px; }
  .mini th:first-child, .mini td:first-child { padding-left: 8px; }
  .mini th:last-child, .mini td:last-child { border-right: 0; }
  .mini thead th { background: var(--superficie-2); border-bottom: 1px solid var(--linha); }
  @media (max-width: 640px) { .tabela.vira-cartao td { border-right: 0; } .tabela.vira-cartao tr:hover { background: none; } }

  /* período */
  .periodo-cab .datas { display: flex; gap: 6px; flex-wrap: wrap; }
  .periodo-cab .datas .campo { width: 150px; }
  .periodo-cab .faixa { width: 100%; margin: 0; }
  .colunas .col.est i { opacity: .55; }
  @media (max-width: 640px) { .periodo-cab .datas .campo { flex: 1 1 130px; width: auto; } }

  /* atualizar dados */
  .soltar { display: grid; gap: 6px; place-items: center; text-align: center; padding: 36px 16px; border: 2px dashed var(--linha-forte); border-radius: var(--raio); background: var(--superficie-2); cursor: pointer; transition: border-color .15s, background .15s; }
  .soltar:hover, .soltar.sobre { border-color: var(--foco); background: var(--info-suave); }
  .soltar b { font-size: 15px; }
  .soltar span { font-size: 13px; color: var(--suave); max-width: 520px; }
  .log { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); }
  .log:empty { display: none; }
  .estado { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linha); }
  .card > .estado:first-of-type, .log > .estado:first-child { border-top: 0; }
  .estado .ico { width: 28px; height: 28px; border-radius: var(--raio-p); display: grid; place-items: center; font-weight: 700; }
  .estado p { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
  .estado.ok .ico { background: var(--ok-suave); color: var(--ok); }
  .estado.atencao .ico { background: var(--atencao-suave); color: var(--atencao); }
  .estado.erro .ico { background: var(--erro-suave); color: var(--erro); }
  .estado.info .ico { background: var(--info-suave); color: var(--info); }

  /* compras */
  .tabela th, .tabela td { padding-inline: 14px; }
  .tabela.compacta th, .tabela.compacta td { padding-inline: 12px; }
  .txt-erro { color: var(--erro); } .txt-ok { color: var(--ok); }
  button.link { all: unset; cursor: pointer; font-weight: 600; color: var(--texto); }
  button.link:hover { text-decoration: underline; }
  .como-ler { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 13px; color: var(--suave); }
  .como-ler b { color: var(--texto); }
  .topo-app .acoes .btn { height: 34px; }
  @media (max-width: 640px) { .topo-app .acoes .btn { display: none; } }
}

/* ===== revisão 09/10: topo é espaço nobre, dado centralizado, filtros enxutos ===== */
@layer telas {
  :root { --topo: 52px; --topo-compacto: 46px; }
  .miolo { padding: 12px 24px 32px; gap: 14px; max-width: 1600px; }
  @media (max-width: 900px) { .miolo { padding: 10px 12px 24px; gap: 12px; } }
  .topo-app { padding: 0 24px; }
  .topo-app h1 { font-size: 19px; }
  .card { padding: 14px 18px; }
  .card-cab { margin-bottom: 10px; gap: 8px 12px; }
  .grade { gap: 14px; }
  .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 1199px) { .grade-2 { grid-template-columns: 1fr; } }
  .kpi { gap: 4px; }
  .kpi b { font-size: clamp(20px, 10cqi, 30px); }
  .kpi b small { font-size: 13px; font-weight: 600; color: var(--suave); }
  .kpi .sub { line-height: 1.4; }
  .kpi-link { text-decoration: none; color: inherit; transition: border-color .15s; }
  .kpi-link:hover { border-color: var(--linha-forte); }
  .contexto { font-size: 16px; margin: 0; }
  .frase { margin: 0; font-size: 13.5px; color: var(--suave); text-align: justify; }
  .nota, .saudacao p, .como-ler li, .modelo-cab + p { text-align: justify; }
  .alerta { padding: 8px 12px; }
  .alertas { gap: 6px; }

  /* barra de filtros: uma linha */
  .barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
  .barra-esq, .barra-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  .barra-dir { margin-left: auto; }
  .barra .seg button { height: 30px; padding: 0 12px; }
  .barra .seg-p button { padding: 0 10px; font-size: 12.5px; }
  .barra .seg-rot { align-self: center; padding: 0 8px 0 6px; font-size: 12px; font-weight: 700; color: var(--fraco); }
  .barra .btn { height: 34px; }
  .barra .datas { display: inline-flex; align-items: center; gap: 6px; }
  .barra .datas .campo { height: 34px; width: 142px; }
  .barra .faixa { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--fraco); }
  .painel-filtros { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--linha); }
  @media (max-width: 640px) {
    .barra-esq, .barra-esq .seg { width: 100%; }
    .barra-esq .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .barra-esq .seg .seg-rot { display: none; }
    .barra .datas { width: 100%; } .barra .datas .campo { flex: 1; width: auto; min-width: 0; }
    .barra-dir { margin-left: 0; }
  }

  /* tabelas: dado centralizado, nome do produto à esquerda */
  .tabela th, .tabela td, .tabela td.num, .tabela th.num { text-align: center; vertical-align: middle; }
  .tabela th.esq, .tabela td.esq, .tabela td:has(> .prod) { text-align: left; }
  .tabela th button { justify-content: center; }
  .tabela td, .tabela th { padding-block: 9px; }
  .mini th, .mini td, .mini th:first-child, .mini td:first-child { text-align: center; }
  .mini td.esq, .mini th.esq { text-align: left; }
  @media (max-width: 640px) { .tabela.vira-cartao td, .tabela.vira-cartao td.num { text-align: left; } }

  /* modelos */
  .modelos-t tr.modelo td { background: var(--superficie); }
  .modelos-t tr.modelo.aberto td { background: var(--superficie-2); border-bottom-color: transparent; }
  .modelos-t .seta { display: inline-block; width: 14px; color: var(--fraco); }
  .modelos-t td.mix { min-width: 180px; }
  .modelos-t tr.sub > td { padding: 0 14px 12px; background: var(--superficie-2); }
  .modelos-t tr.sub:hover { background: none; }
  .modelos-t tr.sub .mini { background: var(--superficie); }
  @media (max-width: 640px) { .modelos-t td.mix { min-width: 0; grid-column: 1 / -1; } .modelos-t tr.sub { display: block; } .modelos-t tr.sub > td { display: block; padding: 0 0 12px; } }

  /* risco na visão geral */
  .risco-lista { list-style: none; margin: 0; padding: 0; display: grid; }
  .risco-lista li + li { border-top: 1px solid var(--linha); }
  .risco-lista a { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 4px; color: inherit; text-decoration: none; border-radius: var(--raio-xs); }
  .risco-lista a:hover { background: color-mix(in srgb, var(--info-suave) 70%, var(--superficie)); }
  .risco-lista .prod { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
  .risco-lista .dir { display: grid; justify-items: end; gap: 3px; text-align: right; }
  .risco-lista small { font-size: 12px; color: var(--suave); white-space: nowrap; }

  /* compras */
  .compra-t td.ck, .compra-t th.ck { width: 36px; padding-inline: 8px; }
  .compra-t input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--prim-fundo); cursor: pointer; }
  .compra-t .qtd { width: 76px; height: 32px; text-align: center; padding: 0 6px; }
  .compra-t tr.marcado td { background: color-mix(in srgb, var(--ok-suave) 55%, transparent); }
  .resumo-sel { margin: 0 0 10px; font-size: 13px; color: var(--suave); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ids { font-size: 12.5px; color: var(--suave); margin-left: 6px; }
  .ids b { color: var(--texto); font-variant-numeric: tabular-nums; }
}
@layer telas {
  .card-cab .acoes { flex-wrap: wrap; justify-content: flex-end; }
  @media (max-width: 640px) { .card-cab .acoes { margin-left: 0; width: 100%; justify-content: flex-start; } }
}
@layer telas {
  .lateral .pe .conectado { display: grid; gap: 2px; padding: 0 4px 8px; }
  .lateral .pe .conectado:empty { display: none; }
  .lateral .pe .conectado b { font-size: 14px; text-transform: capitalize; }
}
@layer telas {
  .txt-atencao { color: var(--atencao); font-weight: 600; }
  .conf { display: grid; gap: 6px; margin-top: 8px; }
  .conf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .conf-item { border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--superficie); }
  .conf-item summary { cursor: pointer; padding: 6px 10px; font-size: 13px; font-weight: 600; list-style-position: inside; }
  .conf-item summary .tag { height: 20px; padding: 0 6px; margin-right: 4px; }
  .conf-item ul { margin: 0; padding: 4px 12px 8px 30px; font-size: 12.5px; color: var(--suave); display: grid; gap: 2px; max-height: 240px; overflow: auto; }
  .conf-item.erro { border-color: color-mix(in srgb, var(--erro) 35%, var(--linha)); }
  .conf-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
}