/* Categorías (Taste + impeccable + ux): un ranking que se lee como tabla, con lo que la dirección comercial necesita
   para decidir: cuánto vende, si crece o cae, cuánto deja y si alcanza el inventario. Barras de una sola tinta, sin
   segmentos (antes eran todas del mismo color y se veían como puntitos); la elegida en naranja. */
#app-shell .cat-orden { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:2px 0 14px; }
#app-shell .cat-orden > span { font-size:14px; color:var(--sp-tenue, #5f6b7a); }
#app-shell .cat-orden .seg-filtros { margin:0 !important; }

#app-shell .cat-tabla { display:flex; flex-direction:column; }
#app-shell .cat-fila { display:grid; grid-template-columns:minmax(230px, 2.1fr) minmax(150px, 1.5fr) 120px 120px 120px; align-items:center; column-gap:18px;
  width:100%; padding:12px 10px; border:0; border-bottom:1px solid var(--sp-linea, #e9ebed); border-radius:0; background:none; text-align:left; font:inherit; color:var(--sp-tinta, #16191f); cursor:pointer; }
#app-shell button.cat-fila:hover { background:#f7f8fa; }
#app-shell button.cat-fila:focus-visible { outline:2px solid #c2410c; outline-offset:-2px; border-radius:8px; }
#app-shell button.cat-fila[aria-pressed="true"] { background:#fff4ec; }
#app-shell .cat-cab { cursor:default; padding-top:4px; padding-bottom:8px; font-size:13px; font-weight:600; color:var(--sp-tenue, #5f6b7a); }
#app-shell .cat-fila .num { text-align:right; font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap; }
#app-shell .cat-fila .num b { font-weight:700; }
#app-shell .cat-nom { display:flex; align-items:baseline; gap:12px; min-width:0; }
#app-shell .cat-nom > b { flex:none; width:22px; font-size:13px; font-weight:600; color:var(--sp-tenue, #5f6b7a); font-variant-numeric:tabular-nums; }
#app-shell .cat-nom > span { min-width:0; font-size:15px; font-weight:600; line-height:1.3; }
#app-shell .cat-nom em { display:block; margin-top:2px; font-style:normal; font-weight:400; font-size:13px; color:var(--sp-tenue, #5f6b7a); }
#app-shell .cat-part { display:flex; align-items:center; gap:10px; }
#app-shell .cat-barra { flex:1; height:8px; border-radius:4px; background:#eef0f3; overflow:hidden; }
#app-shell .cat-barra i { display:block; height:100%; border-radius:4px; background:#3f3f46; }
#app-shell .cat-fila[aria-pressed="true"] .cat-barra i { background:#e0661a; }
#app-shell .cat-part em { flex:none; width:48px; text-align:right; font-style:normal; font-size:13px; color:var(--sp-texto, #414d5c); font-variant-numeric:tabular-nums; }
#app-shell :is(.cat-fila, .cat-mov-lista, .in-cifra) .gen-sube { color:#1f7a4d !important; }
#app-shell :is(.cat-fila, .cat-mov-lista, .in-cifra) .gen-baja { color:#b42318 !important; }
#app-shell .cat-fila :is(.gen-sube, .gen-baja) { font-weight:600; }
#app-shell :is(.cat-fila, .in-cifra, .cat-mov-lista) :is(.gen-sube, .gen-baja) i { font-size:16px; vertical-align:-2px; }
#app-shell .cat-nuevo { font-size:13px; font-weight:600; color:#1f7a4d; }
#app-shell .cat-fila .rojo { color:#b42318; font-weight:600; }
#app-shell .cat-inv { display:inline-flex; align-items:center; gap:5px; }
#app-shell .cat-inv.cat-poco { color:#b4440c; font-weight:600; }
#app-shell .cat-inv.cat-mucho { color:#5f6b7a; }
#app-shell .cat-inv i { font-size:13px; }

/* Lo que más creció / cayó. */
#app-shell .cat-mov .section.in-tarjeta { min-height:0 !important; }
#app-shell .cat-mov-lista { list-style:none; margin:4px 0 0; padding:0; }
#app-shell .cat-mov-lista li + li { border-top:1px solid var(--sp-linea, #e9ebed); }
#app-shell .cat-mov-lista button { display:grid; grid-template-columns:minmax(0,1fr) auto 64px; align-items:center; gap:14px; width:100%; padding:10px 6px; border:0; border-radius:8px; background:none; text-align:left; font:inherit; cursor:pointer; }
#app-shell .cat-mov-lista button:hover { background:#f7f8fa; }
#app-shell .cat-mov-lista button:focus-visible { outline:2px solid #c2410c; outline-offset:-2px; }
#app-shell .cat-mov-nom { font-size:15px; color:var(--sp-tinta, #16191f); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-shell .cat-mov-lista b { font-size:15px; font-variant-numeric:tabular-nums; }
#app-shell .cat-mov-lista em { font-style:normal; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }

/* Aviso de inventario corto. */
#app-shell .cat-alerta { display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; padding:14px 18px; border:1px solid #ffd3b8; border-radius:14px; background:#fff4ec; font-size:15px; line-height:1.45; color:var(--sp-tinta, #16191f); }
#app-shell .cat-alerta i { color:#c2410c; font-size:17px; margin-top:1px; }

/* Pantallas angostas: cada categoría en dos renglones, con el nombre de cada dato. */
@media (max-width:900px) {
  #app-shell .cat-cab { display:none; }
  #app-shell .cat-fila { grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:10px; column-gap:10px; padding:14px 6px; }
  #app-shell .cat-nom, #app-shell .cat-part { grid-column:1 / -1; }
  #app-shell .cat-fila .num { text-align:left; display:flex; flex-direction:column; gap:2px; font-size:14px; }
  #app-shell .cat-fila .num::before { font-size:12px; font-weight:500; color:var(--sp-tenue, #5f6b7a); }
  #app-shell .cat-fila .num:nth-child(3)::before { content:"Venta"; }
  #app-shell .cat-fila .num:nth-child(4)::before { content:"vs anterior"; }
  #app-shell .cat-fila .num:nth-child(5)::before { content:"Inventario"; }
}
#app-shell .cat-fila .num .caso-meta { font-size:13px; color:var(--sp-tenue, #5f6b7a); }

/* Resumen sin «Margen bruto» (2026-11-03): tres cifras a lo ancho en escritorio. */
@media (min-width:901px) { #app-shell .in-rejilla.cuatro.cat-tres { grid-template-columns:repeat(3, minmax(0,1fr)); } }