/* Panel de productividad — layout. Color solo --belk-*. */
.pp-page{ max-width:1100px; }

.pp-range{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pp-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px; margin-bottom:14px;
}
.pp-kpi{
  background:var(--belk-level-2);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm);
  padding:12px 12px 10px;
}
.pp-kpi b{
  display:block; font-size:1.35rem; line-height:1.15; color:var(--belk-text);
  font-variant-numeric:tabular-nums;
}
.pp-kpi span{ display:block; margin-top:4px; font-size:.72rem; color:var(--belk-text-muted); }
.pp-kpi[data-tone="ok"] b{ color:var(--belk-ok); }
.pp-kpi[data-tone="accent"] b{ color:var(--belk-accent); }

.pp-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pp-chart{ height:92px; width:100%; display:block; }
.pp-axis{ font-size:.72rem; color:var(--belk-text-muted); margin-top:6px; }

.pp-q{
  display:grid; grid-template-columns:110px 1fr auto;
  gap:10px; align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--belk-border);
  font-size:.85rem; color:inherit; text-decoration:none;
}
.pp-q:last-child{ border-bottom:0; }
.pp-q:hover{ background:var(--belk-level-2-hi); }
.pp-q code{ font:700 12px ui-monospace,Menlo,monospace; color:var(--belk-brand); }
.pp-q small{ display:block; color:var(--belk-text-muted); font-size:.72rem; }
.pp-q em{ font-style:normal; font-variant-numeric:tabular-nums; font-weight:700; }

.pp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 10px; }
.pp-chip{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--belk-border); font-size:.75rem; font-weight:600;
}
.pp-chip--sat{ background:var(--belk-err-soft); color:var(--belk-err); }
.pp-chip--opp{ background:var(--belk-ok-soft); color:var(--belk-ok); }
.pp-chip--ok{ background:var(--belk-level-2-hi); color:var(--belk-text); }

.pp-mk-kpis{
  display:grid; grid-template-columns:1.4fr 1.15fr 1fr;
  gap:8px; margin:0 0 10px;
}
.pp-mk-kpis > div{
  background:var(--belk-level-2); border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm); padding:10px 8px;
}
.pp-mk-kpis b{ display:block; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.pp-mk-kpis span{ font-size:.68rem; color:var(--belk-text-muted); }
.pp-mk-kpis [data-tone="ok"] b{ color:var(--belk-ok); }
.pp-mk-kpis [data-tone="warn"] b{ color:var(--belk-warn); }
.pp-mk-patios ul{
  list-style:none; margin:0; padding:0;
}
.pp-mk-patios li{
  display:flex; justify-content:space-between; align-items:baseline; gap:6px;
  font-size:.72rem; line-height:1.35;
}
.pp-mk-patios li span{ font-size:.72rem; color:var(--belk-text); display:inline; }
.pp-mk-patios li b{ font-size:.72rem; display:inline; }
.pp-mk-patios > span{
  display:block; margin-top:4px; font-size:.68rem; color:var(--belk-text-muted);
}
.pp-mbars{
  background:var(--belk-level-2); border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm); padding:6px 8px;
  margin:0 0 10px;
}
.pp-mbar{
  display:grid; grid-template-columns:76px 1fr 40px auto;
  gap:8px; align-items:center; margin:0; padding:7px 2px;
  font-size:.8rem;
}
.pp-mbar + .pp-mbar{ border-top:1px solid var(--belk-border); }
.pp-mbar > span{ font-weight:600; }
.pp-mbar b, .pp-mbar em{
  font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; text-align:right;
}
.pp-mk-prices{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px;
}
.pp-mk-range{ grid-column:1 / -1; }
.pp-mk-prices > div{
  background:var(--belk-level-2); border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm); padding:8px 10px; font-size:.75rem;
  color:var(--belk-text-muted);
}
.pp-mk-prices span{ display:block; }
.pp-mk-prices b{ display:block; color:var(--belk-text); font-variant-numeric:tabular-nums; font-size:.9rem; }
.pp-mk-range b{ font-size:1.05rem; }
.mbar-svg{ height:12px; width:100%; display:block; }
.mbar-svg--sat .mbar-bg{ fill:var(--belk-paper-sunken); }
.mbar-svg--opp .mbar-bg{ fill:var(--belk-ok-soft); }
.mbar-svg--ok .mbar-bg{ fill:var(--belk-paper-sunken); }
.mbar-svg--sat .mbar-g0, .mbar-svg--sat .mbar-g1{ stop-color:#111; }
.mbar-svg--opp .mbar-g0, .mbar-svg--opp .mbar-g1{ stop-color:var(--belk-ok); }
.mbar-svg--ok .mbar-g0, .mbar-svg--ok .mbar-g1{ stop-color:var(--belk-brand); }
.mbar-g1{ stop-opacity:.72; }
.mdelta{
  display:inline-block; min-width:2.1em; padding:2px 7px; border-radius:999px;
  font-size:.68rem; line-height:1.3; text-align:center;
}
.mdelta--up{ background:var(--belk-ok-soft); color:var(--belk-ok); }
.mdelta--down{ background:var(--belk-err-soft); color:var(--belk-err); }
.mdelta--flat{ background:var(--belk-level-2); color:var(--belk-text-muted); }

.pp-insumo{
  display:grid; grid-template-columns:48px 1fr auto;
  gap:10px; align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--belk-border);
}
.pp-insumo:last-child{ border-bottom:0; }
.pp-thumb{
  width:48px; height:48px; border-radius:8px;
  background:var(--belk-paper-sunken);
  border:1px solid var(--belk-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--belk-brand);
  overflow:hidden;
}
.pp-thumb svg{ width:26px; height:26px; }
.pp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-insumo strong{ display:block; font-size:.84rem; }
.pp-insumo small{ color:var(--belk-text-muted); font-size:.72rem; }
.pp-price{ text-align:right; font-variant-numeric:tabular-nums; }
.pp-price b{ display:block; font-size:.9rem; color:var(--belk-ok); }
.pp-price small{ color:var(--belk-text-muted); font-size:.7rem; }

.pp-curio{
  border-left:3px solid var(--belk-accent);
}
.pp-curio-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0 0 6px;
}
.pp-curio-top h2{
  margin:0; display:flex; align-items:center; gap:8px;
}
.pp-sec-ico{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:var(--belk-level-2-hi); border:1px solid var(--belk-border);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--belk-brand);
}
.pp-sec-ico svg{ width:16px; height:16px; display:block; fill:currentColor; }
.pp-curio-date{
  font-size:.72rem; font-weight:600; color:var(--belk-text-muted); white-space:nowrap;
}
.pp-curio-kind{
  display:inline-block; margin:0 0 8px;
  padding:2px 8px; border-radius:999px;
  background:var(--belk-level-2-hi); border:1px solid var(--belk-border);
  font-size:.68rem; font-weight:700; color:var(--belk-text);
}
.pp-curio-title{
  margin:0 0 6px; font-size:1.05rem; font-weight:800; line-height:1.25; color:var(--belk-text);
}
.pp-curio-body{
  margin:0 0 10px; font-size:.9rem; line-height:1.45; color:var(--belk-text);
}
.pp-curio-next{
  margin:0; font-size:.72rem; color:var(--belk-text-muted);
}

.pp-promo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 14px;
}
.pp-tile{
  position:relative;
  display:block;
  aspect-ratio:1;
  text-decoration:none;
  color:var(--belk-on-brand);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius);
  overflow:hidden;
  box-shadow:var(--belk-shadow-1);
}
.pp-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.pp-tile-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding:36px 12px 12px;
  background:linear-gradient(transparent, rgba(8,14,24,.88));
}
.pp-tile-copy b{
  display:block; font-size:.95rem; font-weight:800; line-height:1.2;
}
.pp-tile-copy span{
  display:block; margin-top:2px; font-size:.72rem; opacity:.9; line-height:1.3;
}
.pp-tile:hover{ border-color:var(--belk-border-strong); }

.pp-zone-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
.pp-zone-row label{ font-size:.78rem; color:var(--belk-text-muted); }
.pp-zone-row select{
  border:1px solid var(--belk-border-strong);
  background:var(--belk-level-2);
  color:var(--belk-text);
  border-radius:8px; padding:6px 10px; font:500 12px inherit;
}

@media (max-width:820px){
  .pp-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pp-kpis .pp-kpi:last-child{ grid-column:1 / -1; }
  .pp-grid2{ grid-template-columns:1fr; }
  .pp-range{ width:100%; }
  .subpage-top{ flex-wrap:wrap; }
  .pp-mk-kpis, .pp-mk-prices{ grid-template-columns:1fr; }
}