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

/* auto-fit, no repeat(5) (2026-09-09): desde que un KPI solo entra si tiene base,
   la fila puede traer 3 y con 5 columnas fijas quedaban angostas y con un hueco a la
   derecha. Con auto-fit las columnas vacías se colapsan y las que hay llenan el ancho. */
.pp-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,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 em{
  display:block; margin-top:5px; font-size:.68rem; font-style:normal; line-height:1.3;
  color:var(--belk-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:1.3em;
}
.pp-kpi em[data-tone="up"]{ color:var(--belk-ok); }
.pp-kpi em[data-tone="down"]{ color:var(--belk-err); }
.pp-kpi[data-tone="ok"] b{ color:var(--belk-ok); }
.pp-kpi[data-tone="accent"] b{ color:var(--belk-accent); }

/* Igual que los KPIs: si solo hay un gráfico con datos, ocupa el ancho completo en
   vez de dejar media tarjeta vacía al lado. */
.pp-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,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;
}
/* `display` de la clase le gana al atributo hidden: sin esto el chip vacío sigue ocupando sitio. */
.pp-chip[hidden]{ display:none; }
.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-prices b{ display:block; color:var(--belk-text); font-variant-numeric:tabular-nums; font-size:.9rem; }
.pp-mk-range b{ font-size:1.05rem; }
.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); }
/* Perder puntos de demanda no es un error: es una dirección. Mismo naranja de
   advertencia que el veredicto, para que la fila hable con una sola voz
   (verde sube, naranja baja). Antes iba en el terracota de error. */
.mdelta--down{ background:var(--belk-warn-soft); color:var(--belk-warn); }
.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:1.6fr 1fr;
  gap:10px;
  margin:0 0 14px;
}
/* Abre el panel (2026-09-08): el mueble de la semana es la portada de la revista.
   Antes iba al final; lo cambió el usuario. */
.pp-tile{
  position:relative;
  display:block;
  /* Tope de alto (2026-09-06): con aspect-ratio:1 los dos tiles ocupaban
     545 px de una página de 1809 — un tercio del panel para promoción. */
  height:172px;
  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, .pp-cover img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.pp-tile-copy, .pp-cover-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); }

/* ── Portada de la revista ── Misma foto y mismo degradado que el tile; lo que
   cambia es el alto y la jerarquía del texto. Las muestras de melamina las pinta
   el JS con el hex del catálogo: son DATOS, no tema, y por eso no viven acá. */
.pp-cover{
  position:relative;
  display:block;
  height:240px;
  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-cover:hover{ border-color:var(--belk-border-strong); }
.pp-cover-copy{ padding:64px 16px 14px; }
.pp-cover-kicker{
  display:block;
  font-size:.7rem; font-weight:800; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.pp-cover-copy b{
  display:block; margin-top:6px;
  font-size:1.45rem; font-weight:800; line-height:1.1;
}
.pp-cover-tag{
  display:block; margin-top:4px;
  font-size:.8rem; line-height:1.35; opacity:.92;
}
.pp-cover-paleta{ display:flex; gap:6px; margin-top:10px; }
.pp-cover-paleta i{
  display:block; width:28px; height:16px;
  border-radius:4px;
  border:1px solid var(--belk-on-brand);
}
.pp-cover-cta{
  display:inline-block; margin-top:12px;
  padding:7px 14px; border-radius:999px;
  font-size:.76rem; font-weight:700;
  background:var(--belk-accent); color:var(--belk-on-accent);
}
.pp-promo .pp-tile{ height:240px; }

/* ── «Tus números se abren solos» ── Barra de progreso hacia el umbral de cada
   cifra. La fila cumplida se apaga en vez de desaparecer: el molde no salta. */
.pp-metas-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
/* «Hoy»: el nombre del proyecto activo al lado del título (proyecto central). */
.pp-hoy-proy{ font-size:.78em; font-weight:600; color:var(--belk-text-muted,#414B5C); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%; }
.pp-hoy-proy[hidden]{ display:none; }
/* «Guardados antiguos»: filas fijas, conteo a la derecha. */
.pp-antiguos-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pp-antiguos-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px;
  border-radius:var(--belk-radius-sm,8px); background:var(--belk-level-1,#F3F1EC); font-size:13px; }
.pp-antiguos-list li[data-vacio="1"]{ display:none; }
.pp-antiguos-list a{ color:var(--belk-link,#143A7D); text-decoration:none; }
.pp-antiguos-list a:hover{ text-decoration:underline; }
.pp-antiguos-list b{ font-variant-numeric:tabular-nums; color:var(--belk-text,#0D2350); }
.pp-meta{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:10px; row-gap:6px;
  padding:8px 10px;
  background:var(--belk-level-2-hi);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm);
}
.pp-meta-tx{ min-width:0; }
.pp-meta-tx b{ display:block; font-size:.86rem; line-height:1.2; color:var(--belk-text); }
.pp-meta-tx small{ display:block; margin-top:2px; font-size:.72rem; color:var(--belk-text-muted); }
.pp-meta-n{ align-self:center; font-size:.74rem; font-weight:700; color:var(--belk-text-muted); }
.pp-meta-bar{
  grid-column:1 / -1;
  display:block; height:6px;
  background:var(--belk-level-2);
  border-radius:999px; overflow:hidden;
}
.pp-meta-bar i{
  display:block; height:100%;
  background:var(--belk-accent);
  border-radius:999px;
  transition:width var(--belk-transition);
}
.pp-meta[data-listo="1"] .pp-meta-bar i{ background:var(--belk-ok); }
.pp-meta[data-listo="1"] .pp-meta-tx small{ color:var(--belk-ok); }

/* ── Adam ── Presenta al asistente (vive en la App Belk). El avatar es un recorte
   transparente que asoma sobre un disco de marca; la tarjeta no crece más que
   el texto. */
.pp-adam{
  display:grid;
  grid-template-columns:1fr 220px;
  column-gap:16px; align-items:end;
  min-height:232px;
  padding-bottom:0; overflow:hidden;
}
.pp-adam-copy{ padding-bottom:18px; align-self:center; }
.pp-adam h2{ display:block; font-size:1.7rem; line-height:1.1; margin:6px 0 0; }
.pp-adam .subpage-muted{ margin:8px 0 0; font-size:.95rem; line-height:1.45; max-width:34rem; }
.pp-adam-kicker{
  margin:0;
  font-size:.62rem; font-weight:800; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--belk-text-muted);
}
.pp-adam-kicker span{ display:inline-block; margin-left:8px; color:var(--belk-accent); }
.pp-adam-fig{ display:block; line-height:0; align-self:center; padding-bottom:16px; }
/* El video trae su propio taller de fondo: va en un cuadro redondeado, sin disco. */
.pp-adam-img{
  display:block;
  width:220px; height:220px; object-fit:cover;
  border-radius:var(--belk-radius);
  border:1px solid var(--belk-border);
  box-shadow:var(--belk-shadow-1);
}
.pp-adam{ position:relative; cursor:pointer; }
.pp-adam:hover, .pp-adam:focus-visible{ border-color:var(--belk-border-strong); }
.pp-adam-cta{ margin:10px 0 0; font-size:.8rem; font-weight:700; color:var(--belk-link); }
/* Acordeón de insumos: 5 a la vista mientras esté colapsado. */
#ppInsumos[data-colapsado="1"] .pp-insumo:nth-of-type(n+6){ display:none; }
.pp-insumos-mas{ margin-top:10px; }

/* Sin cifras, sin fila: display:grid le ganaría al atributo hidden. */
.pp-kpis[hidden], .pp-grid2[hidden]{ display:none; }
.pp-entra .belk-btn{ margin-top:4px; }
/* ── Comunidad: tres columnas de «lo más usado», con barra de % ── */
.pp-com-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pp-com-col h3{ margin:0 0 6px; font-size:.78rem; font-weight:800; color:var(--belk-text-muted); text-transform:uppercase; letter-spacing:.06em; }
.pp-com-list{ display:grid; gap:6px; }
.pp-com-row{ display:grid; grid-template-columns:1fr auto; column-gap:8px; align-items:center; font-size:.82rem; color:var(--belk-text); }
.pp-com-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-com-row b{ font-size:.78rem; color:var(--belk-text-muted); }
.pp-com-row i{
  grid-column:1 / -1; display:block; height:5px; border-radius:3px;
  background:var(--belk-level-2-hi); overflow:hidden; position:relative;
}
.pp-com-row i::after{ content:""; position:absolute; inset:0; width:var(--w,0%); background:var(--belk-brand); border-radius:3px; }
a.pp-insumo{ text-decoration:none; color:inherit; }
a.pp-insumo:hover{ border-color:var(--belk-border-strong); }
/* Informe de mercado: una fila por tipo de mueble. Las columnas se reparten
   igual en la cabecera y en las filas, así los números quedan en columna. */
.pp-inf{ display:grid; gap:2px; margin-bottom:10px; }
/* `display` de la clase le gana al atributo: sin esto la tabla vacía sigue ocupando sitio. */
.pp-inf[hidden]{ display:none; }
.pp-inf-head,
.pp-inf-row{
  display:grid; grid-template-columns:minmax(0,1.2fr) auto auto minmax(0,1.4fr);
  column-gap:10px; align-items:center; padding:7px 0;
}
.pp-inf-head{
  font-size:.7rem; font-weight:800; color:var(--belk-text-muted);
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--belk-border);
}
.pp-inf-head i{ font-style:normal; }
.pp-inf-row{ border-bottom:1px solid var(--belk-border); font-size:.84rem; }
.pp-inf-row:last-child{ border-bottom:0; }
.pp-inf-row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.pp-inf-row b{ font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.82rem; }
.pp-inf-sig{
  font-style:normal; font-size:.72rem; font-weight:700; line-height:1.25;
  padding:3px 8px; border-radius:999px; justify-self:start;
}
.pp-inf-sig[data-sig="opp"]{ background:var(--belk-ok-soft); color:var(--belk-ok); }
/* Advertencia, no error (2026-09-13): un mueble peleado no es una falla del
   taller, es un aviso para decidir. El terracota de error se leía como alarma;
   el naranja quemado de --belk-warn dice «cuidado» sin gritar. */
.pp-inf-sig[data-sig="sat"]{ background:var(--belk-warn-soft); color:var(--belk-warn); }
.pp-inf-sig[data-sig="ok"]{ background:var(--belk-level-2-hi); color:var(--belk-text-muted); }
@media (max-width:640px){
  .pp-inf-head{ display:none; }
  .pp-inf-row{ grid-template-columns:minmax(0,1fr) auto; row-gap:4px; }
  .pp-inf-row b:nth-of-type(1)::before{ content:"se pide "; font-weight:600; color:var(--belk-text-muted); }
  .pp-inf-row b:nth-of-type(2){ grid-column:1; justify-self:start; color:var(--belk-text-muted); }
  .pp-inf-row b:nth-of-type(2)::before{ content:"compiten "; font-weight:600; }
  .pp-inf-sig{ grid-column:1 / -1; }
}

/* Tendencias: mismas filas que el informe, con la variación en color. */
.pp-tend{ margin-bottom:12px; }
.pp-com-row b[data-tone="up"]{ color:var(--belk-ok); }
.pp-com-row b[data-tone="down"]{ color:var(--belk-err); }
.pp-tend-vacio{ margin:0 0 12px; }
.pp-ipc{
  display:grid; grid-template-columns:1fr auto; column-gap:10px; align-items:baseline;
  padding:10px 12px; border:1px solid var(--belk-border); border-radius:var(--belk-radius-sm);
  background:var(--belk-level-2-hi);
}
.pp-ipc span{ font-size:.82rem; color:var(--belk-text); }
.pp-ipc b{ font-size:1.05rem; font-variant-numeric:tabular-nums; color:var(--belk-text); }
.pp-ipc small{ grid-column:1 / -1; font-size:.7rem; color:var(--belk-text-muted); }

/* ── «Hoy»: los 4 pasos. Mismo molde con y sin datos; el estado va en data-hecho.
   Fila: [nº] [ícono] [título / detalle · estado] [botón], en DOS líneas:
   el detalle y el estado van juntos, separados por un punto. ── */
.pp-hoy-sub{ margin:-4px 0 10px; }
.pp-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pp-paso{
  display:grid; grid-template-columns:auto auto 1fr auto;
  column-gap:10px; align-items:center;
  padding:6px 10px;
  background:var(--belk-level-2-hi);
  border:1px solid var(--belk-border);
  border-radius:var(--belk-radius-sm);
}
.pp-paso-ico{ display:inline-flex; color:var(--belk-text-muted); }
.pp-paso-ico svg{ width:18px; height:18px; display:block; fill:currentColor; }
.pp-paso-tx{ min-width:0; }
.pp-paso-tx b{ display:block; font-size:.9rem; line-height:1.2; color:var(--belk-text); }
.pp-paso-tx small{ display:block; font-size:.72rem; color:var(--belk-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* El estado vive DENTRO del detalle: antes ocupaba una segunda línea propia y
   con cuatro pasos eran cuatro líneas de alto regaladas (pedido 2026-09-14).
   Va PRIMERO y el detalle detrás del punto: en 375 px solo cabe uno de los dos
   (estado 137 px + detalle 147 px contra 162 px de ancho), así que el que se
   corta con «…» tiene que ser el detalle, que es fijo — el estado es lo que
   cambia y lo único que hay que leer. Conserva su color. */
.pp-paso-estado{ color:var(--belk-text-muted); }
.pp-paso-det{ color:var(--belk-text-muted); font-weight:400; }
.pp-paso-det::before{ content:" · "; }
/* En telefono el detalle no cabe: se cortaba a media palabra y dejaba un
   «· ...» colgando en las cuatro filas. Bajo 560 px no se muestra — el titulo
   ya nombra el modulo. */
@media (max-width:560px){ .pp-paso-det{ display:none; } }
.pp-paso-btn{ grid-column:4; }
.pp-paso[data-hecho="1"] .pp-paso-n{ background:var(--belk-ok); }
.pp-paso[data-hecho="1"] .pp-paso-ico{ color:var(--belk-ok); }
.pp-paso[data-hecho="1"] .pp-paso-estado{ color:var(--belk-ok); }
/* el siguiente paso pendiente lleva el acento: uno solo, una primaria visible */
.pp-paso[data-siguiente="1"]{ border-color:var(--belk-border-strong); }
.pp-paso[data-siguiente="1"] .pp-paso-estado{ color:var(--belk-text); font-weight:600; }

@media (min-width:900px){
  .pp-pasos{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:10px; }
}

@media (max-width:820px){
  .pp-kpis{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .pp-kpis .pp-kpi:last-child:nth-child(odd){ grid-column:1 / -1; }
  .pp-grid2{ grid-template-columns:1fr; }
  .pp-range{ width:100%; }
  .subpage-top{ flex-wrap:wrap; }
  .pp-promo{ grid-template-columns:1fr; }
  .pp-meta{ grid-template-columns:1fr; }
  .pp-com-grid{ grid-template-columns:1fr; }
  .pp-adam{ grid-template-columns:1fr 150px; column-gap:10px; min-height:0; }
  .pp-adam-kicker{ font-size:.62rem; white-space:nowrap; }
  .pp-adam h2{ font-size:1.4rem; }
  .pp-adam .subpage-muted{ font-size:.88rem; }
  .pp-adam-img{ width:150px; height:150px; }
  .pp-meta-n{ justify-self:start; }
  .pp-cover{ height:230px; }
  .pp-cover-copy b{ font-size:1.25rem; }
  .pp-promo .pp-tile{ height:150px; }
}

/* ── Molde de carga (solo primera visita: después manda el espejo) ──
   Los :empty son a propósito: en cuanto entra el contenido de verdad, el
   molde desaparece aunque el atributo siga puesto un instante. Lo quita
   avisarListo(), y hay un perro guardián de 6 s en js/productividad.js. */
html[data-pp-cargando] #ppKpis{ min-height:76px; }
html[data-pp-cargando] #ppKpis:empty{
  background:repeating-linear-gradient(to right,
    var(--belk-level-2) 0, var(--belk-level-2) calc(20% - 10px),
    transparent calc(20% - 10px), transparent 20%);
  border-radius:var(--belk-radius-sm);
}
html[data-pp-cargando] #ppUtilChart:empty,
html[data-pp-cargando] #ppCotizChart:empty{
  height:92px; background:var(--belk-level-2); border-radius:var(--belk-radius-sm);
}
html[data-pp-cargando] #ppQuotes:empty{
  min-height:120px; background:var(--belk-level-2); border-radius:var(--belk-radius-sm);
}