/* ===========================================================================
   COMPACTO — componentes compartilhados das duas abas (Catálogo e Desempenho)
   Usa os tokens de styles.css e as variáveis de série --d-s* (desempenho.css).
   Servido SEM login: nenhum dado, texto de negócio, cupom ou link aqui.
   =========================================================================== */
.btn-gaveta{margin-left:auto;flex-shrink:0;min-height:var(--touch-target);padding:0 var(--sp-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-weight:var(--fw-semibold);cursor:pointer;align-self:center}
.btn-gaveta:hover{background:var(--color-hover-bg)}
.abas-barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-2);background:var(--color-surface-card);border-bottom:1px solid var(--color-border);padding-right:var(--sp-3)}
.abas-barra .abas{flex:1;border-bottom:0;background:none}
main.wrap{max-width:1440px;min-height:70vh}
/* reserva a altura da aba enquanto os dados chegam (evita salto de layout) */
@media(min-width:1001px){#app{min-height:1150px}#app-desempenho{min-height:1100px}}
html{scrollbar-gutter:stable}
/* faixa de números */
.faixa{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-1)}
.faixa4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi2{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi2 .r{font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.3px;color:var(--color-text-muted)}
.kpi2 .v{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.15;font-variant-numeric:tabular-nums}
.kpi2 .v small{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.kpi2 .duo{display:flex;flex-wrap:wrap;gap:0 var(--sp-3)}
.kpi2 .s{font-size:var(--fs-sm);color:var(--color-text-muted)}
.atencao-chip-linha{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2)}
.chip-atencao{min-height:var(--touch-target);padding:0 var(--sp-4);border:1px solid var(--color-warning-border);border-radius:var(--radius-full);background:var(--color-warning-bg);color:var(--color-text);font:inherit;font-weight:var(--fw-bold);cursor:pointer}
.chip-atencao:hover{background:var(--color-hover-bg)}
/* grades e caixas */
.grade{display:grid;gap:var(--sp-3)}
.g2{grid-template-columns:2fr 1fr}
.painel{margin-top:var(--sp-3)}
.cx{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);min-width:0}
.cx h2,.cx h3{font-size:var(--fs-md);color:var(--color-heading);margin-bottom:var(--sp-1)}
.alt{position:relative;height:300px}
.muted{color:var(--color-text-muted)}
.vazio-cat{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
/* filtros do catálogo */
.filtros2{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);margin-top:var(--sp-3)}
.f2{display:flex;flex-direction:column;gap:2px;min-width:0}
.f2>span{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.f2 select,.f2 input[type=search]{min-height:var(--touch-target);padding:0 var(--sp-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit}
.f2.busca{flex:1;min-width:200px}
.f2.busca input{width:100%}
.filtros-contagem{font-size:var(--fs-base);color:var(--color-text-muted);margin:var(--sp-1) 0 0}
/* cartões de família */
.fam-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-2)}
.fc{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:0;border-top:4px solid var(--color-brand-primary-light);padding:var(--sp-2) var(--sp-3);text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:var(--touch-target)}
.fc.cupom{border-top-color:var(--color-info-text)}
.fc.base{border-top-color:var(--color-text-muted)}
.fc:hover{background:var(--color-hover-bg)}
.fc[aria-expanded="true"]{outline:2px solid var(--color-brand-primary-light)}
.fc .t{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fc .t b{font-size:var(--fs-lg);color:var(--color-heading)}
.fc .res{font-size:var(--fs-base);color:var(--color-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc .rod{display:flex;gap:var(--sp-1) var(--sp-2);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--color-text);align-items:center}
.pt{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--color-brand-primary-bg);color:var(--color-brand-primary)}
[data-theme="dark"] .pt{background:rgba(46,125,50,.22);color:var(--color-success-text)}
.pt.falta{background:transparent;border:1px dashed var(--color-warning-border);color:var(--color-text)}
.tag2{display:inline-block;padding:1px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);background:var(--color-info-bg);color:var(--color-info-text);white-space:nowrap}
.tag2.aviso{background:var(--color-warning-bg);color:var(--color-text);border:1px dashed var(--color-warning-border)}
.tag2.ok{background:var(--d-ok-bg);color:var(--color-brand-primary)}
[data-theme="dark"] .tag2.ok{color:var(--color-success-text)}
.fam-aberta{grid-column:1/-1;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3)}
.abas-int{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.chip2{min-height:var(--touch-target);padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-card);color:var(--color-text);font:inherit;font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer}
.chip2[aria-pressed="true"]{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:#fff}
.ajuda-id{font-size:var(--fs-sm);margin-bottom:var(--sp-1)}
.lp{display:grid;grid-template-columns:minmax(220px,2.2fr) minmax(70px,.8fr) 84px minmax(150px,1.4fr) minmax(150px,1.2fr) 80px 96px;gap:var(--sp-2);align-items:center;padding:var(--sp-1) 0;font-size:var(--fs-base)}
.lp.h{font-size:var(--fs-sm);text-transform:uppercase;color:var(--color-text-muted);font-weight:var(--fw-bold);border-bottom:2px solid var(--color-brand-primary)}
.plano{border-bottom:1px solid var(--color-border)}
.lp .nm b{color:var(--color-heading)}
.lp .val{font-size:var(--fs-sm)}
.lp .id{font-family:var(--font-mono);font-size:var(--fs-sm)}
.cod{font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--color-heading);background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1px 6px;overflow-wrap:anywhere}
.lp .btn-copiar{margin-left:4px;min-height:32px}
.plano-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);background:var(--color-surface);border-radius:var(--radius-sm);padding:var(--sp-3);margin:0 0 var(--sp-2);font-size:var(--fs-base)}
.plano-det b{display:block;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.3px;color:var(--color-text-muted);margin-bottom:2px}
.plano-det ul{padding-left:var(--sp-4)}
.plano-det .cal{list-style:none;padding:0;max-height:200px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.plano-det .cal li{padding:2px var(--sp-2);border-bottom:1px solid var(--color-border)}
.plano-det .cal li.fechado b{color:var(--color-warning-text)}
.plano-extra{grid-column:1/-1}
.alerta-p{margin-top:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-left:3px solid var(--color-warning-fill);background:var(--color-warning-bg);border-radius:var(--radius-sm)}
.alerta-p.erro{border-left-color:var(--color-danger-text);background:var(--color-danger-bg)}
.alerta-p b{display:inline;font-size:inherit;text-transform:none;color:var(--color-text)}
.lk{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-1) 0}
.lk>span{flex:1;min-width:120px}
.sobre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);font-size:var(--fs-base)}
.sobre b{display:block;font-size:var(--fs-sm);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:2px}
.sobre ul{padding-left:var(--sp-4)}
.aviso-conf{background:var(--color-warning-bg);border:1px dashed var(--color-warning-border);border-radius:var(--radius-sm);padding:var(--sp-2)}
.nota-lista{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--color-info-bg);border-left:4px solid var(--color-info-text);border-radius:var(--radius-sm)}
/* gaveta */
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--color-surface-card);border-left:1px solid var(--color-border);box-shadow:-8px 0 24px rgba(0,0,0,.25);z-index:50;display:flex;flex-direction:column}
.gaveta[hidden]{display:none}
.gaveta-topo{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--color-border);font-size:var(--fs-lg);color:var(--color-heading)}
.gaveta-fechar{min-width:var(--touch-target);min-height:var(--touch-target);border:0;background:none;color:var(--color-text);font-size:24px;cursor:pointer}
.gaveta-corpo{overflow-y:auto;padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-base)}
.gaveta-corpo details{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--sp-3)}
.gaveta-corpo summary{cursor:pointer;min-height:var(--touch-target);display:flex;align-items:center;font-weight:var(--fw-bold);color:var(--color-heading)}
.gaveta-corpo details>div{padding-bottom:var(--sp-2)}
.gaveta-corpo h4{font-size:var(--fs-md);color:var(--color-heading);margin:var(--sp-2) 0 var(--sp-1)}
.gaveta-corpo dt{font-weight:var(--fw-bold);color:var(--color-heading);margin-top:var(--sp-2)}
.gaveta-corpo li{margin-left:var(--sp-4)}
.gaveta-corpo p{margin-top:var(--sp-1)}
.prop-g{border-top:1px solid var(--color-border);padding:var(--sp-2) 0}
@media(max-width:1000px){.faixa,.faixa4{grid-template-columns:repeat(2,minmax(0,1fr))}.g2{grid-template-columns:1fr}.fam-grade{grid-template-columns:repeat(2,minmax(0,1fr))}.sobre{grid-template-columns:1fr}}
@media(max-width:768px){
  .abas .aba{padding:0 var(--sp-3)}
  .btn-gaveta{padding:0 var(--sp-3)}
  .f2{flex:1 1 calc(50% - var(--sp-2))}
  .f2 select,.f2 input[type=search]{width:100%;font-size:16px;min-width:0}
  .f2.busca{flex:1 1 100%}
  .lp{grid-template-columns:1fr 1fr}
  .lp.h{display:none}
  .lp .nm{grid-column:1/-1}
  .btn-copiar,.btn-abrir{min-height:var(--touch-target)}
  .lp .btn-copiar{min-height:var(--touch-target)}
  .alt{height:260px}
}
@media(max-width:560px){.fam-grade{grid-template-columns:1fr}}
@media(max-width:480px){.faixa,.faixa4{grid-template-columns:1fr}}

.tag2{color:var(--color-text)}
.tag2.ok{color:var(--color-brand-primary)}
[data-theme="dark"] .tag2.ok{color:var(--color-success-text)}
.lk small{display:block;font-size:var(--fs-sm)}