/* Vista General de Sellport (2026-10-30), a partir de la referencia «Panel de Analítica E-commerce Sellport».
   El contenido de cada tarjeta es el aprobado por el director; cambia sólo el diseño:
   - Sin café: interfaz blanca, tinta azul noche (#141a2e) y el naranja del logo como acento (acción, selección,
     la cifra principal y el ritmo de venta).
   - Datos con color con sentido: cada marketplace en el color de su marca; las tiendas en azul pizarra con la
     principal en naranja.
   - Barra superior blanca con el logo de Sellport; el riel de plataformas no cambia. */
body.modo-general {
  --gx-suelo:#f5f6fa; --gx-papel:#ffffff; --gx-tinta:#141a2e; --gx-texto:#4b5568; --gx-tenue:#6b7385; --gx-linea:#eceef3;
  --gx-naranja:#ff6a1a; --gx-naranja-hondo:#c2410c; --gx-naranja-tinta:#fff4ec; --gx-naranja-borde:#ffd3b8;
  --gx-azul:#1e2a5a; --gx-riel:#eef0f5;
  --gx-sombra:0 1px 2px rgba(20,26,46,.05), 0 10px 30px -18px rgba(20,26,46,.18);
  --gx-letra:"Schibsted Grotesk", Inter, "Segoe UI", sans-serif;
}
html body.modo-general { background:var(--gx-suelo) !important; }
body.modo-general #app-shell main { background:radial-gradient(760px 360px at 100% 0%, rgba(255,138,61,.14), transparent 65%), var(--gx-suelo) !important; }
body.modo-general #app-shell main, body.modo-general #app-shell main * { font-family:var(--gx-letra); }
body.modo-general #app-shell main .bi { font-family:bootstrap-icons !important; }

/* Barra superior blanca. */
body.modo-general #app-shell .topnav { background:#fff !important; border-bottom:1px solid var(--gx-linea) !important; box-shadow:0 6px 20px -16px rgba(20,26,46,.35) !important; }
body.modo-general #app-shell .topnav .brand-art { background:url("/sellport-logo.png?v=naranja") left center / contain no-repeat !important; }
body.modo-general #app-shell .topnav .brand-lockup, body.modo-general #app-shell .topnav .topnav-actions { border-color:var(--gx-linea) !important; }
body.modo-general #app-shell .topnav .live-indicator { color:var(--gx-texto) !important; background:#f3f4f8 !important; }
body.modo-general #app-shell .topnav .role { color:var(--gx-naranja-hondo) !important; background:var(--gx-naranja-tinta) !important; }
body.modo-general #app-shell .topnav .account-chip { background:#fff !important; border-color:var(--gx-linea) !important; }
body.modo-general #app-shell .topnav .account-name { color:var(--gx-tinta) !important; }
body.modo-general #app-shell .topnav #admin-menu > .nav-dropdown-toggle, body.modo-general #app-shell .topnav .topnav-logout { background:#fff !important; border-color:var(--gx-linea) !important; color:var(--gx-texto) !important; }
@media (min-width:901px) {
  body.modo-general #app-shell #navigation .nav-dropdown-toggle, body.modo-general #app-shell #navigation a.plain-link { color:var(--gx-texto) !important; }
  body.modo-general #app-shell #navigation .nav-dropdown-toggle i, body.modo-general #app-shell #navigation a.plain-link i, body.modo-general #app-shell .topnav .caret { color:#9aa1b2 !important; }
  body.modo-general #app-shell #navigation .nav-dropdown-toggle:hover, body.modo-general #app-shell #navigation a.plain-link:hover { color:var(--gx-tinta) !important; background:#f5f6fa !important; box-shadow:none !important; }
  body.modo-general #app-shell #navigation .nav-dropdown-toggle.active, body.modo-general #app-shell #navigation a.plain-link.active { color:var(--gx-naranja-hondo) !important; background:var(--gx-naranja-tinta) !important; box-shadow:none !important; border-radius:10px !important; }
  body.modo-general #app-shell #navigation .nav-dropdown-toggle.active i, body.modo-general #app-shell #navigation a.plain-link.active i { color:var(--gx-naranja) !important; }
}

/* Encabezado. */
body.modo-general #app-shell .topbar { border:0 !important; padding-bottom:0 !important; }
body.modo-general #app-shell .topbar .micro-label, body.modo-general #app-shell .breadcrumb-line { display:none !important; }
body.modo-general #app-shell .topbar h1 { font:700 32px/1.1 var(--gx-letra) !important; letter-spacing:-.035em !important; color:var(--gx-tinta) !important; }
body.modo-general #app-shell .topbar #page-subtitle { font-size:15px !important; color:var(--gx-tenue) !important; margin-top:6px !important; }

/* Filtros como una fila de controles blancos. */
body.modo-general #app-shell .gen-barra-filtros { gap:12px !important; align-items:flex-end; margin-bottom:18px !important; }
body.modo-general #app-shell .gen-campo > span { font:600 12.5px/1 var(--gx-letra) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--gx-tenue) !important; margin-bottom:6px; }
body.modo-general #app-shell .gen-periodo-btn, body.modo-general #app-shell .gen-barra-filtros select { min-height:44px; border-radius:12px !important; border:1px solid var(--gx-linea) !important; background-color:#fff !important; color:var(--gx-tinta) !important; box-shadow:var(--gx-sombra) !important; }
body.modo-general #app-shell .gen-periodo-btn i.bi-calendar3 { color:var(--gx-naranja) !important; }
body.modo-general #app-shell .gen-periodo-btn:hover, body.modo-general #app-shell .gen-barra-filtros select:hover { border-color:var(--gx-naranja-borde) !important; }

/* Resumen del periodo: franja blanca con el ícono en naranja. */
body.modo-general #app-shell .in-titular.bien { background:#fff !important; border:1px solid var(--gx-linea) !important; border-radius:16px !important; box-shadow:var(--gx-sombra); color:var(--gx-tinta) !important; }
body.modo-general #app-shell .in-titular.bien > i { color:var(--gx-naranja) !important; background:var(--gx-naranja-tinta); border-radius:10px; padding:8px; }
body.modo-general #app-shell .in-titular .gen-cobertura { color:var(--gx-tenue) !important; }

/* Tarjetas. */
body.modo-general #app-shell .section, body.modo-general #app-shell .in-tablero .section.in-tarjeta { background:var(--gx-papel) !important; border:1px solid var(--gx-linea) !important; border-radius:20px !important; box-shadow:var(--gx-sombra) !important; }
body.modo-general #app-shell .in-tablero .section.in-tarjeta:hover { transform:none; box-shadow:0 1px 2px rgba(20,26,46,.05), 0 16px 36px -18px rgba(20,26,46,.26) !important; }
body.modo-general #app-shell .in-cab h2 { font:700 16px/1.3 var(--gx-letra) !important; color:var(--gx-tinta) !important; letter-spacing:-.01em !important; }
body.modo-general #app-shell .in-ayuda { color:#b0b6c4 !important; }
body.modo-general #app-shell .in-tablero { gap:18px !important; }

/* Venta del periodo: cuatro tarjetas; la de Ventas lleva el acento. */
body.modo-general #app-shell .mp-resumen > .section.in-tarjeta { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
body.modo-general #app-shell .mp-resumen > .section > .in-cab { padding:0 4px 4px !important; }
body.modo-general #app-shell .mp-resumen .in-rejilla.cuatro { gap:18px !important; }
body.modo-general #app-shell .mp-resumen .in-cifra { display:flex; flex-direction:column; background:#fff; border:1px solid var(--gx-linea); border-radius:20px; padding:20px 22px; box-shadow:var(--gx-sombra); }
body.modo-general #app-shell .mp-resumen .in-cifra:first-child { background:linear-gradient(140deg, #fff4ec, #ffffff 70%); border-color:var(--gx-naranja-borde); }
body.modo-general #app-shell .mp-resumen .in-cifra > span:not(.in-sub) { order:-1; font:600 14px/1.3 var(--gx-letra); color:var(--gx-texto); margin-bottom:10px; }
body.modo-general #app-shell .mp-resumen .in-cifra strong { font:700 32px/1.05 var(--gx-letra) !important; letter-spacing:-.035em !important; color:var(--gx-tinta) !important; }
body.modo-general #app-shell .mp-resumen .in-cifra:first-child strong { color:var(--gx-naranja-hondo) !important; }
body.modo-general #app-shell .mp-resumen .in-cifra .in-sub { margin-top:10px; font-size:12.5px; color:var(--gx-tenue); }

/* Barras: riel gris claro, extremos redondos, cifras en tinta. */
body.modo-general #app-shell .gen-barra { background:var(--gx-riel) !important; border-radius:99px !important; height:8px; overflow:hidden; }
body.modo-general #app-shell .gen-barra > i, body.modo-general #app-shell .gen-barra-canales > i { border-radius:99px !important; }
body.modo-general #app-shell .gen-canales b, body.modo-general #app-shell .gen-filas b, body.modo-general #app-shell .gen-top2 b, body.modo-general #app-shell .gen-canales strong { color:var(--gx-tinta) !important; }
body.modo-general #app-shell .gen-filas em, body.modo-general #app-shell .gen-canales em { color:var(--gx-tenue) !important; font-style:normal; }
body.modo-general #app-shell .gen-canal .gen-logo { background:#fff; border-radius:12px; box-shadow:0 0 0 1px var(--gx-linea), 0 4px 12px -6px rgba(20,26,46,.25); }
body.modo-general #app-shell .gen-filas li > button:first-child, body.modo-general #app-shell .gen-canal, body.modo-general #app-shell .gen-top2 li > button { border-radius:12px !important; transition:background-color .2s ease; }
body.modo-general #app-shell .gen-filas li > button:first-child:hover, body.modo-general #app-shell .gen-canal:hover, body.modo-general #app-shell .gen-top2 li > button:hover { background:#f7f8fb !important; }
body.modo-general #app-shell .gen-filas li > button[aria-pressed="true"], body.modo-general #app-shell .gen-canal[aria-pressed="true"] { background:var(--gx-naranja-tinta) !important; }
body.modo-general #app-shell .gen-ir { border-radius:10px !important; border-color:var(--gx-linea) !important; color:var(--gx-texto) !important; background:#fff !important; }
body.modo-general #app-shell .gen-ir:hover { color:var(--gx-naranja-hondo) !important; border-color:var(--gx-naranja-borde) !important; background:var(--gx-naranja-tinta) !important; }

/* Productos con más venta. */
body.modo-general #app-shell .gen-top2 > li { border-color:var(--gx-linea) !important; }
body.modo-general #app-shell .gen-top2 > li::marker { color:var(--gx-tenue); font-weight:700; }
body.modo-general #app-shell .gen-top2 > li:nth-child(-n+3)::marker { color:var(--gx-naranja); }
body.modo-general #app-shell .gen-top2-cab span { color:var(--gx-tenue) !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; }
body.modo-general #app-shell .gen-tit-txt { color:var(--gx-tinta) !important; font-weight:600 !important; }
body.modo-general #app-shell .gen-sube { color:#15803d !important; }
body.modo-general #app-shell .bf-buscar input { border-radius:12px !important; border-color:var(--gx-linea) !important; background:#f7f8fb !important; }
body.modo-general #app-shell .bf-buscar input:focus { background:#fff !important; border-color:var(--gx-naranja) !important; box-shadow:0 0 0 4px rgba(255,106,26,.14) !important; }

/* Selectores segmentados. */
body.modo-general #app-shell .seg-filtros { background:#f1f2f6 !important; border:0 !important; border-radius:12px !important; padding:3px !important; }
body.modo-general #app-shell .seg-filtros .chip { border:0 !important; border-radius:9px !important; background:transparent !important; color:var(--gx-texto) !important; font-weight:600 !important; box-shadow:none !important; }
body.modo-general #app-shell .seg-filtros .chip[aria-pressed="true"] { background:#fff !important; color:var(--gx-tinta) !important; box-shadow:0 1px 3px rgba(20,26,46,.14) !important; }
body.modo-general #app-shell .gen-orden select { border-radius:10px !important; border-color:var(--gx-linea) !important; }

/* Mix operativo y tendencia. */
body.modo-general #app-shell .gen-mix-barra, body.modo-general #app-shell .gen-apilada { border-radius:14px !important; overflow:hidden; }
body.modo-general #app-shell .app-footer { color:var(--gx-tenue) !important; border-color:var(--gx-linea) !important; }
body.modo-general ::selection { background:#ffd9c2; }


/* ===== Pasada con Taste (pantallas de trabajo): quitar lo que delata plantilla de IA. =====
   Un borde o un tono, nunca sombra en reposo; un solo radio (12px); cifras en tinta a 28px dentro de un solo
   contenedor dividido por líneas finas; el acento en los datos, no en el cromo; sin íconos en cuadros teñidos. */
body.modo-general { --gx-sombra:none; }
body.modo-general #app-shell .section, body.modo-general #app-shell .in-tablero .section.in-tarjeta,
body.modo-general #app-shell .in-titular.bien { border-radius:12px !important; box-shadow:none !important; border:1px solid #e6e8ee !important; }
body.modo-general #app-shell .in-tablero .section.in-tarjeta:hover { box-shadow:none !important; border-color:#d5d9e2 !important; }
body.modo-general #app-shell .gen-periodo-btn, body.modo-general #app-shell .gen-barra-filtros select { box-shadow:none !important; border-radius:8px !important; border-color:#d5d9e2 !important; }
body.modo-general #app-shell main { background:var(--gx-suelo) !important; }
body.modo-general #app-shell .topbar h1 { font-size:26px !important; font-weight:600 !important; letter-spacing:-.02em !important; }
body.modo-general #app-shell .topbar #page-subtitle { font-size:14px !important; }

/* Barra superior: sección activa en gris neutro, no en naranja. */
@media (min-width:901px) {
  body.modo-general #app-shell #navigation a.plain-link.active, body.modo-general #app-shell #navigation .nav-dropdown-toggle.active { background:#f1f2f5 !important; color:var(--gx-tinta) !important; }
  body.modo-general #app-shell #navigation a.plain-link.active i, body.modo-general #app-shell #navigation .nav-dropdown-toggle.active i { color:var(--gx-tinta) !important; }
}
body.modo-general #app-shell .topnav { box-shadow:none !important; }
body.modo-general #app-shell .topnav .role { color:var(--gx-texto) !important; background:#f1f2f5 !important; }

/* Resumen: texto con el ícono gris suelto. */
body.modo-general #app-shell .in-titular.bien > i { background:none !important; padding:0 !important; color:var(--gx-tenue) !important; }

/* Venta del periodo: un solo contenedor dividido por líneas finas. */
body.modo-general #app-shell .mp-resumen > .section.in-tarjeta { background:#fff !important; border:1px solid #e6e8ee !important; padding:18px 0 0 !important; }
body.modo-general #app-shell .mp-resumen > .section > .in-cab { padding:0 22px 4px !important; }
body.modo-general #app-shell .mp-resumen .in-rejilla.cuatro { gap:0 !important; }
body.modo-general #app-shell .mp-resumen .in-cifra, body.modo-general #app-shell .mp-resumen .in-cifra:first-child { background:none !important; border:0 !important; border-left:1px solid #eceef2 !important; border-radius:0 !important; padding:14px 22px 20px !important; }
body.modo-general #app-shell .mp-resumen .in-cifra:first-child { border-left:0 !important; }
body.modo-general #app-shell .mp-resumen .in-cifra strong, body.modo-general #app-shell .mp-resumen .in-cifra:first-child strong { font-size:28px !important; font-weight:600 !important; color:var(--gx-tinta) !important; }
body.modo-general #app-shell .mp-resumen .in-cifra > span:not(.in-sub) { font-size:13px; font-weight:500; color:var(--gx-tenue); margin-bottom:6px; }

/* Controles y filas. */
body.modo-general #app-shell .seg-filtros { border-radius:8px !important; }
body.modo-general #app-shell .seg-filtros .chip { border-radius:6px !important; }
body.modo-general #app-shell .gen-ir { border-radius:8px !important; }
body.modo-general #app-shell .gen-canal .gen-logo { box-shadow:none !important; }
body.modo-general #app-shell .gen-filas li > button[aria-pressed="true"], body.modo-general #app-shell .gen-canal[aria-pressed="true"] { background:#f1f2f5 !important; }
body.modo-general #app-shell .gen-top2 > li:nth-child(-n+3)::marker { color:var(--gx-tenue); }

/* Tendencia por marketplace: leyenda abajo como en el boceto. */
body.modo-general #app-shell .gen-tend-leyenda { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:6px; font-size:13px; color:var(--gx-texto); }
body.modo-general #app-shell .gen-tend-leyenda > span { display:inline-flex; align-items:center; gap:7px; }
body.modo-general #app-shell .gen-tend-leyenda .gen-punto { width:9px; height:9px; border-radius:50%; display:inline-block; }
body.modo-general #app-shell .gen-tend-leyenda b { color:var(--gx-tinta); font-weight:600; }

/* ===== Correcciones del revisor de impeccable ===== */
/* 6. Cifras tabulares en columnas; la cifra grande de los KPI con su espaciado normal. */
body.modo-general #app-shell .gen-top2 b, body.modo-general #app-shell .gen-filas b, body.modo-general #app-shell .gen-filas em, body.modo-general #app-shell .gen-canales b, body.modo-general #app-shell .gen-canales strong, body.modo-general #app-shell .gen-top2 li > button > span:last-child { font-variant-numeric:tabular-nums !important; }
body.modo-general #app-shell .mp-resumen .in-cifra strong { font-variant-numeric:normal !important; font-size:32px !important; line-height:1.05 !important; letter-spacing:-.025em !important; }
/* 7. Sublíneas de los KPI ligeras. */
body.modo-general #app-shell .mp-resumen .in-cifra .in-sub, body.modo-general #app-shell .mp-resumen .in-cifra .in-sub b { font-weight:400 !important; color:var(--gx-tenue) !important; font-size:13px !important; }

/* 1. Productos con más venta: una línea por producto, barra acotada. */
body.modo-general #app-shell .gen-top2-cab, body.modo-general #app-shell .gen-top2 li > button { grid-template-columns:minmax(0,2.4fr) minmax(140px,1fr) 96px 64px !important; }
body.modo-general #app-shell .gen-top2 .gen-barra-prod { max-width:260px; }
body.modo-general #app-shell .gen-top2 li > button { padding:7px 6px !important; }
body.modo-general #app-shell .gen-top2 > li + li { border-top:1px solid #eef0f4 !important; }
body.modo-general #app-shell .gen-top2 .gen-tit { row-gap:1px !important; }
body.modo-general #app-shell .gen-top2 .gen-tit-txt { -webkit-line-clamp:1 !important; font-size:13.5px !important; }
body.modo-general #app-shell .gen-top2 .gen-tit em { grid-column:2; grid-row:2; font-size:12.5px !important; color:var(--gx-tenue) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.modo-general #app-shell .gen-top2 .gen-puntos { grid-column:2; grid-row:2; justify-self:end; margin-top:0 !important; font-size:12px !important; flex-wrap:nowrap !important; }
body.modo-general #app-shell .gen-top2 .gen-tit { grid-template-columns:24px minmax(0,1fr) !important; }
body.modo-general #app-shell .gen-top2 .gen-tit em { padding-right:150px; }

/* 2. Venta por tienda: columnas alineadas y nombres en una línea. */
body.modo-general #app-shell .gen-filas li:not(:has(.gen-ir))::after { content:""; flex:none; width:86px; }
body.modo-general #app-shell .gen-filas li > button:first-child > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* 3. Ritmo diario: la gráfica ocupa la tarjeta. */
body.modo-general #app-shell #gen-ritmo { min-height:300px; }

/* 5. Resumen del periodo como entradilla bajo el título, sin caja. */
body.modo-general #app-shell .in-titular.bien { background:none !important; border:0 !important; padding:0 2px !important; margin:-4px 0 16px !important; }
body.modo-general #app-shell .in-titular.bien > i { display:none !important; }
body.modo-general #app-shell .in-titular.bien > div { font-size:15px; line-height:1.45; color:var(--gx-tinta); }
body.modo-general #app-shell .in-titular.bien b { font-weight:600; }
body.modo-general #app-shell .in-titular .gen-cobertura { display:block; font-size:13px; margin-top:2px; }

/* 4. Filtros: controles de 40px con flecha propia. */
body.modo-general #app-shell .gen-barra-filtros select { appearance:none; -webkit-appearance:none; height:40px; min-height:40px; padding:0 36px 0 12px !important; min-width:180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236b7385' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4 6 4 4 4-4'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; }
body.modo-general #app-shell .gen-periodo-btn { height:40px; min-height:40px; }
body.modo-general #app-shell main :focus-visible { outline:2px solid var(--gx-naranja) !important; outline-offset:2px; }

/* 8. Mix operativo: banda delgada, etiquetas fuera. */
body.modo-general #app-shell .gen-tipos { height:14px !important; gap:2px; background:none !important; border-radius:7px !important; margin:30px 0 16px !important; overflow:visible !important; }
body.modo-general #app-shell .gen-tipos button { padding:0 !important; border-radius:7px; position:relative; overflow:visible !important; }
body.modo-general #app-shell .gen-tipos button b { position:absolute; bottom:20px; left:0; color:var(--gx-tinta) !important; text-shadow:none !important; font-size:20px; font-weight:600; }
body.modo-general #app-shell .gen-tipos button span { display:none; }

/* 9. Barra superior: rol sin mayúsculas espaciadas, menú agrupado. */
body.modo-general #app-shell .topnav .role { text-transform:none !important; letter-spacing:0 !important; font:500 11.5px var(--gx-letra) !important; }
@media (min-width:901px) { body.modo-general #app-shell #navigation { justify-content:flex-start !important; gap:4px !important; } }
/* Ajustes tras la revisión: el % del mix ya está en la lista de abajo; los nombres de tienda con más espacio. */
body.modo-general #app-shell .gen-tipos { height:12px !important; margin:14px 0 16px !important; }
body.modo-general #app-shell .gen-tipos button b { display:none !important; }
body.modo-general #app-shell .gen-filas li > button:first-child { grid-template-columns:minmax(0,1.5fr) minmax(60px,1fr) auto auto !important; }

/* Fila de tres tarjetas: con todas las tiendas conectadas, «Venta por tienda» crecía y estiraba las otras dos.
   Ahora las tres miden lo mismo (el alto de la más baja de contenido fijo) y la lista de tiendas se desplaza dentro. */
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { align-items:stretch; grid-auto-rows:minmax(0, 520px); }
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) > .section { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) > .section > .gen-filas,
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) > .section > .gen-canales { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:#d5d9e2 transparent;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
body.modo-general #app-shell #gen-ritmo { flex:1 1 auto; min-height:260px; height:auto !important; }

/* ===== Encabezado reacomodado (Taste + impeccable) =====
   Una franja: título a la izquierda y, a la derecha, una barra compacta de filtros donde cada control lleva su
   etiqueta adentro («E-commerce  Todos ▾»), como el selector de fecha del boceto. El resumen del periodo deja
   de ser texto suelto: pasa a ser la línea de apoyo de la tarjeta «Venta del periodo» (lo mueve sellport-general.js). */
body.modo-general #app-shell main { position:relative; }
body.modo-general #app-shell #content { position:relative; }
body.modo-general #app-shell .topbar { min-height:56px; margin-bottom:18px !important; }
body.modo-general #app-shell .topbar h1 { font-size:28px !important; }
body.modo-general #app-shell .gen-barra-filtros { display:flex !important; flex-wrap:nowrap !important; gap:8px !important; margin:0 0 18px !important; }
body.modo-general #app-shell .gen-campo { flex-direction:row !important; align-items:center; gap:0 !important; height:40px; padding:0 0 0 12px; margin:0 !important;
  background:#fff; border:1px solid #d9dce4; border-radius:10px; transition:border-color .15s ease; }
body.modo-general #app-shell .gen-campo:hover { border-color:#b9bfcc; }
body.modo-general #app-shell .gen-campo:focus-within { border-color:var(--gx-naranja); box-shadow:0 0 0 3px rgba(255,106,26,.14); }
body.modo-general #app-shell .gen-campo > span { font:500 13px/1 var(--gx-letra) !important; color:var(--gx-tenue) !important; white-space:nowrap; margin:0 !important; }
body.modo-general #app-shell .gen-barra-filtros select, body.modo-general #app-shell .gen-periodo-btn { border:0 !important; box-shadow:none !important; background-color:transparent !important; height:38px !important; min-height:38px !important;
  font:600 13.5px var(--gx-letra) !important; color:var(--gx-tinta) !important; min-width:0 !important; }
body.modo-general #app-shell .gen-barra-filtros select { padding:0 32px 0 8px !important; max-width:220px; }
body.modo-general #app-shell .gen-campo-periodo { padding:0; }
body.modo-general #app-shell .gen-campo-periodo > span { display:none; }
body.modo-general #app-shell .gen-periodo-btn { display:inline-flex !important; align-items:center; gap:8px; padding:0 12px !important; }
body.modo-general #app-shell .gen-periodo-btn em { font-weight:400; color:var(--gx-tenue) !important; font-style:normal; }
@media (min-width:1100px) {
  body.modo-general #app-shell .gen-barra-filtros { position:absolute; top:-74px; right:0; margin:0 !important; }
  body.modo-general #app-shell .topbar { padding-right:calc(var(--gx-filtros, 760px) + 24px) !important; }
}
/* El resumen dentro de la tarjeta de cifras, bajo su título. */
body.modo-general #app-shell .mp-resumen .in-titular.bien { margin:2px 22px 10px !important; padding:0 !important; }
body.modo-general #app-shell .mp-resumen .in-titular.bien > div { font-size:14px !important; line-height:1.5; color:var(--gx-texto) !important; }
body.modo-general #app-shell .mp-resumen .in-titular.bien b { color:var(--gx-tinta) !important; font-weight:600 !important; }
body.modo-general #app-shell .mp-resumen .in-titular .gen-cobertura { display:inline; font-size:13px !important; color:var(--gx-tenue) !important; margin-left:4px; }

/* La tarjeta de cifras conserva su fondo blanco al pasar el cursor (una regla vieja la volvía transparente). */
body.modo-general #app-shell .mp-resumen > .section.in-tarjeta:hover { background:#fff !important; border-color:#d5d9e2 !important; }

/* Nada brinca al pasar el cursor: ni las tarjetas ni los botones de las filas (ui.css los subía 1-2 px). */
body.modo-general #app-shell main .section:hover, body.modo-general #app-shell main .in-tarjeta:hover, body.modo-general #app-shell main button:hover:not(:disabled), body.modo-general #app-shell main .metric:hover { transform:none !important; }
body.modo-general #app-shell .in-tablero > .section.in-tarjeta { transition:border-color .15s ease !important; }

/* ===== Como la «Propuesta comercial v2» ===== */
/* Venta por tienda (Distribución por tienda): barras gruesas sin riel, la primera en azul noche y las demás en azul acero,
   la cifra y el % justo después de la barra (sellport-general.js ajusta el ancho de cada barra). */
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) > button:first-child { display:flex !important; align-items:center; gap:10px; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) > button:first-child > span:first-child { flex:0 0 150px; font-size:14px; color:var(--gx-tinta); }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) .gen-barra { flex:0 1 var(--ancho, 50%); height:22px !important; background:none !important; border-radius:3px !important; min-width:4px; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) .gen-barra > i { width:100% !important; border-radius:3px !important; background:#3f3f46 !important; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]):first-child .gen-barra > i { background:#3f3f46 !important; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) > button:first-child b { font-size:14px; color:var(--gx-tinta); white-space:nowrap; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) > button:first-child em { font-size:12.5px; white-space:nowrap; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf])::after { display:none !important; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tiendaf]) .gen-ir { margin-left:auto; }

/* Tendencia por e-commerce: una tarjetita por canal. */
body.modo-general #app-shell .gen-tend-canales { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px 24px; }
body.modo-general #app-shell .gen-tend-canal { min-width:0; }
body.modo-general #app-shell .gen-tend-cab2 { display:flex; align-items:center; gap:8px; }
body.modo-general #app-shell .gen-tend-cab2 img { width:26px; height:26px; border-radius:6px; }
body.modo-general #app-shell .gen-tend-cab2 b { font-size:15px; color:var(--gx-tinta); }
body.modo-general #app-shell .gen-tend-cab2 > span { margin-left:auto; font-weight:700; font-size:14px; }
body.modo-general #app-shell .gen-tend-tot { display:block; margin:4px 0 2px; font-size:12.5px; color:var(--gx-tenue); }
body.modo-general #app-shell .gen-tend-graf { height:120px; }
body.modo-general #app-shell #gen-tend-resumen { margin-top:14px; padding:12px 14px; border-radius:10px; background:#f3f5f9; color:var(--gx-texto); font-size:13px; }

/* Distribución por tienda: una fila por tienda oficial; al abrirla, el desglose por canal. */
body.modo-general #app-shell .gen-distrib { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:4px; scrollbar-width:thin; scrollbar-color:#d5d9e2 transparent; }
body.modo-general #app-shell .gen-grupo > summary { list-style:none; display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; cursor:pointer; }
body.modo-general #app-shell .gen-grupo > summary::-webkit-details-marker { display:none; }
body.modo-general #app-shell .gen-grupo > summary:hover { background:#f7f8fb; }
body.modo-general #app-shell .gen-grupo[open] > summary { background:#f3f5f9; }
body.modo-general #app-shell .gen-grupo-nombre { flex:0 0 120px; font-size:14px; color:var(--gx-tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.modo-general #app-shell .gen-grupo-barra { flex:0 1 var(--ancho); height:24px; min-width:4px; border-radius:3px; background:#3f3f46; }
body.modo-general #app-shell .gen-grupo-lider .gen-grupo-barra { background:#3f3f46; }
body.modo-general #app-shell .gen-grupo > summary b { font-size:14px; font-weight:700; color:var(--gx-tinta); white-space:nowrap; font-variant-numeric:tabular-nums; }
body.modo-general #app-shell .gen-grupo > summary em { font-size:12.5px; font-style:normal; color:var(--gx-tenue); font-variant-numeric:tabular-nums; }
body.modo-general #app-shell .gen-grupo-n { margin-left:auto; font-size:12px; color:var(--gx-tenue); white-space:nowrap; }
body.modo-general #app-shell .gen-grupo > summary > .bi { color:#9aa1b2; transition:transform .2s ease; }
body.modo-general #app-shell .gen-grupo[open] > summary > .bi { transform:rotate(180deg); }
/* Desglose: filas más chicas, sangradas, con barra delgada. */
body.modo-general #app-shell .gen-sub { margin:4px 0 8px 14px !important; padding-left:12px; border-left:2px solid #e6e9f0; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; }
body.modo-general #app-shell .gen-sub li:has([data-gen-tiendaf]) > button:first-child > span:first-child { flex:0 0 150px; font-size:13px; color:var(--gx-texto); }
body.modo-general #app-shell .gen-sub li:has([data-gen-tiendaf]) .gen-barra { height:10px !important; }
body.modo-general #app-shell .gen-sub li:has([data-gen-tiendaf]) .gen-barra > i, body.modo-general #app-shell .gen-sub li:has([data-gen-tiendaf]):first-child .gen-barra > i { background:#9db4d9 !important; }
body.modo-general #app-shell .gen-sub li:has([data-gen-tiendaf]) > button:first-child b { font-size:13px; }

/* Distribución por tienda: la fila es un botón que abre el desglose en una ventana emergente. */
body.modo-general #app-shell .gen-grupo-cab { display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:0; border-radius:10px; background:none; text-align:left; font:inherit; cursor:pointer; }
body.modo-general #app-shell .gen-grupo-cab:hover { background:#f7f8fb; }
body.modo-general #app-shell .gen-grupo-cab b { font-size:14px; font-weight:700; color:var(--gx-tinta); white-space:nowrap; }
body.modo-general #app-shell .gen-grupo-cab em { font-size:12.5px; font-style:normal; color:var(--gx-tenue); }
body.modo-general #app-shell .gen-grupo-cab > .bi { color:#9aa1b2; }
.gen-desglose { width:min(560px, calc(100vw - 32px)); padding:0; border:0; border-radius:16px; color:#141a2e; box-shadow:0 30px 70px -20px rgba(20,26,46,.45); font-family:"Schibsted Grotesk", Inter, sans-serif; }
.gen-desglose::backdrop { background:rgba(20,26,46,.35); backdrop-filter:blur(2px); }
.gen-desglose[open] { animation:gen-desglose-entra .22s cubic-bezier(.22,1,.36,1); }
@keyframes gen-desglose-entra { from { opacity:0; transform:translateY(8px) scale(.98); } }
.gen-desglose-cab { display:flex; align-items:baseline; gap:12px; padding:20px 22px 12px; border-bottom:1px solid #eceef3; }
.gen-desglose-cab h3 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em; }
.gen-desglose-cab span { color:#6b7385; font-size:14px; }
.gen-desglose-cab button { margin-left:auto; width:32px; height:32px; border:0; border-radius:8px; background:#f3f4f8; color:#4b5568; cursor:pointer; align-self:center; }
.gen-desglose-cab button:hover { background:#e9ebf1; }
.gen-desglose .gen-sub { display:block; margin:0 !important; padding:10px 14px 16px !important; border:0 !important; }
body.modo-general .gen-desglose .gen-sub li { display:flex; align-items:center; gap:6px; }
body.modo-general .gen-desglose .gen-sub li > button:first-child { display:flex !important; align-items:center; gap:10px; flex:1; min-width:0; padding:10px 8px; border:0; border-radius:10px; background:none; font:inherit; text-align:left; cursor:pointer; }
body.modo-general .gen-desglose .gen-sub li > button:first-child:hover { background:#f7f8fb; }
body.modo-general .gen-desglose .gen-sub li > button:first-child > span:first-child { flex:0 0 130px; font-size:14px; color:#141a2e; }
body.modo-general .gen-desglose .gen-sub .gen-barra { flex:0 1 var(--ancho, 50%); height:14px !important; background:none !important; border-radius:3px; min-width:4px; }
body.modo-general .gen-desglose .gen-sub .gen-barra > i { width:100% !important; border-radius:3px !important; background:#3f3f46 !important; display:block; height:100%; }
body.modo-general .gen-desglose .gen-sub li:first-child .gen-barra > i { background:#3f3f46 !important; }
body.modo-general .gen-desglose .gen-sub b { font-size:14px; font-weight:700; white-space:nowrap; }
body.modo-general .gen-desglose .gen-sub em { font-size:12.5px; font-style:normal; color:#6b7385; white-space:nowrap; }
body.modo-general .gen-desglose .gen-ir { margin-left:auto; border:1px solid #eceef3; border-radius:8px; background:#fff; padding:6px 10px; font-size:12.5px; color:#4b5568; }
body.modo-general .gen-desglose .gen-ir:hover { color:#c2410c; border-color:#ffd3b8; background:#fff4ec; }

/* Ritmo diario: el promedio rotulado arriba de la gráfica, con la misma línea punteada como muestra. */
body.modo-general #app-shell .gen-ritmo-prom { display:flex; align-items:center; gap:8px; margin:-4px 0 4px; font-size:13px; color:var(--gx-tenue); }
body.modo-general #app-shell .gen-ritmo-prom i { width:22px; border-top:2px dashed #7a8193; }
body.modo-general #app-shell .gen-ritmo-prom b { color:var(--gx-tinta); font-weight:600; }

/* Fila de tres: el ritmo diario más ancho y la fila menos alta, para que la gráfica no quede alargada. */
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-template-columns:1.35fr 1fr 1fr !important; grid-auto-rows:minmax(0, 440px) !important; }
body.modo-general #app-shell #gen-ritmo { min-height:0 !important; }
@media (max-width:1100px) { body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-template-columns:1fr !important; grid-auto-rows:auto !important; } }

/* Sin la nota de origen de datos ni el pie de página al final de la vista. */
body.modo-general #app-shell .gen-pie, body.modo-general #app-shell .app-footer { display:none !important; }

/* Fila de tres: ritmo diario más angosto, distribución por tienda más ancha. */
body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-template-columns:1fr 1fr 1.3fr !important; }
@media (max-width:1100px) { body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-template-columns:1fr !important; } }
/* Distribución por tienda: columnas fijas (nombre | barra | cifra | % | canales | ›); la barra de la líder llena su columna. */
body.modo-general #app-shell .gen-distrib { overflow-x:hidden !important; }
body.modo-general #app-shell .gen-grupo-cab { display:grid !important; grid-template-columns:minmax(90px, 120px) minmax(60px, 1fr) auto 48px 72px 14px; align-items:center; gap:10px; }
body.modo-general #app-shell .gen-grupo-nombre { flex:none; min-width:0; }
body.modo-general #app-shell .gen-grupo-barra { width:calc(var(--ancho) / .62); max-width:100%; flex:none; }
body.modo-general #app-shell .gen-grupo-cab b { text-align:right; }
body.modo-general #app-shell .gen-grupo-cab em { text-align:right; }
body.modo-general #app-shell .gen-grupo-n { margin:0; text-align:right; }

/* Productos con más venta: foto de la publicación junto al título resumido. */
body.modo-general #app-shell .gen-top2 .gen-tit { grid-template-columns:24px 44px minmax(0,1fr) !important; column-gap:10px !important; align-items:center; }
body.modo-general #app-shell .gen-top2 .gen-tit::before { grid-row:1 / span 2; }
body.modo-general #app-shell .gen-top2 .gen-foto { grid-column:2; grid-row:1 / span 2; width:44px; height:44px; border-radius:8px; background:#f3f4f8; display:grid; place-items:center; overflow:hidden; color:#b0b6c4; }
body.modo-general #app-shell .gen-top2 .gen-foto img { width:100%; height:100%; object-fit:contain; background:#fff; }
body.modo-general #app-shell .gen-top2 .gen-tit-txt { grid-column:3; grid-row:1; }
body.modo-general #app-shell .gen-top2 .gen-tit em, body.modo-general #app-shell .gen-top2 .gen-puntos { grid-column:3 !important; grid-row:2 !important; }
/* Catálogo de productos: la foto a la izquierda del nombre resumido y el SKU debajo. */
body.modo-general #app-shell tr.gen-fila td.wrap { vertical-align:middle; }
body.modo-general #app-shell tr.gen-fila td.wrap > .gen-tit-txt, body.modo-general #app-shell tr.gen-fila td.wrap > .caso-meta { display:block; margin-left:50px; }
body.modo-general #app-shell tr.gen-fila td.wrap .gen-foto { float:left; margin-right:10px; width:40px; height:40px; border-radius:8px; background:#f3f4f8; display:grid; place-items:center; overflow:hidden; color:#b0b6c4; }
body.modo-general #app-shell tr.gen-fila td.wrap .gen-foto img { width:100%; height:100%; object-fit:contain; background:#fff; }
body.modo-general #app-shell tr.gen-fila td.wrap .gen-tit-txt { -webkit-line-clamp:1; font-weight:600; color:var(--gx-tinta); }

/* Fila de tres un poco más alta para que «Venta por marketplace» muestre todos sus canales (Liverpool incluido). */
@media (min-width:1101px) { body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-auto-rows:minmax(0, 590px) !important; } }

/* La fila mide lo que necesita «Venta por marketplace»; el ritmo diario y la distribución se ajustan a esa altura
   (la lista de tiendas se desplaza si no cabe). Así no queda espacio en blanco abajo. */
@media (min-width:1101px) {
  body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) { grid-auto-rows:auto !important; }
  body.modo-general #app-shell .in-tablero:not(.uno):not(.dos) > .section:not(:has(.gen-canales)) { contain:size; min-height:380px; }
}

/* ===== Ventana de producto (lista y catálogo) ===== */
body.modo-general .gen-modal-fondo { background:rgba(20,26,46,.38) !important; }
body.modo-general .gen-modal.ancho { width:min(760px, 100%) !important; padding:0 !important; border-radius:16px !important; box-shadow:0 30px 70px -24px rgba(20,26,46,.45) !important; font-family:"Schibsted Grotesk", Inter, sans-serif; color:#141a2e; animation:gen-modal-entra .22s cubic-bezier(.22,1,.36,1); }
@keyframes gen-modal-entra { from { opacity:0; transform:translateY(8px) scale(.985); } }
body.modo-general .gen-modal.ancho .bi { font-family:bootstrap-icons !important; }
body.modo-general .gen-modal.ancho .gen-modal-cab { display:flex; align-items:center; gap:14px; padding:20px 22px 16px; border-bottom:1px solid #eceef3; margin:0 !important; }
body.modo-general .gen-modal-foto { flex:none; width:56px; height:56px; border-radius:10px; background:#f3f4f8; display:grid; place-items:center; overflow:hidden; color:#b0b6c4; font-size:20px; }
body.modo-general .gen-modal-foto img { width:100%; height:100%; object-fit:contain; background:#fff; }
body.modo-general .gen-modal.ancho .gen-modal-tit { flex:1; min-width:0; }
body.modo-general .gen-modal.ancho .gen-modal-tit h2 { margin:0; font:700 20px/1.2 "Schibsted Grotesk", Inter, sans-serif; letter-spacing:-.02em; color:#141a2e; }
body.modo-general .gen-modal-completo { margin:3px 0 0; font-size:13px; color:#6b7385; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.modo-general .gen-modal.ancho .gen-modal-tit .caso-meta { margin:4px 0 0; font-size:12.5px; color:#6b7385; }
body.modo-general .gen-modal.ancho .pq-link { color:#c2410c !important; text-decoration:none; font-weight:600; border:0 !important; }
body.modo-general .gen-modal.ancho .pq-link:hover { text-decoration:underline; }
body.modo-general .gen-modal.ancho .gen-modal-x { flex:none; align-self:flex-start; width:34px; height:34px; border:0 !important; border-radius:8px; background:#f3f4f8 !important; color:#4b5568; }
body.modo-general .gen-modal.ancho .gen-modal-x:hover { background:#e9ebf1 !important; }
/* Cifras: un bloque dividido por líneas finas. */
body.modo-general .gen-modal.ancho .gen-seis { display:grid !important; grid-template-columns:repeat(6, minmax(0,1fr)); gap:0 !important; margin:0 !important; border-bottom:1px solid #eceef3; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra { padding:14px 16px; border-left:1px solid #eceef3; display:flex; flex-direction:column; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra:first-child { border-left:0; padding-left:22px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra strong { order:2; font:600 20px/1.1 "Schibsted Grotesk", Inter, sans-serif !important; letter-spacing:-.02em; color:#141a2e; white-space:nowrap; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra > span:first-of-type { order:1; font-size:12px; color:#6b7385; margin-bottom:6px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra > :not(strong):not(span:first-of-type) { order:3; font-size:12px; margin-top:4px; }
body.modo-general .gen-modal.ancho h3 { margin:18px 22px 8px !important; font:650 14px "Schibsted Grotesk", Inter, sans-serif !important; color:#141a2e; letter-spacing:0; text-transform:none; }
body.modo-general .gen-modal.ancho .gen-scroll { padding:0 22px; }
body.modo-general .gen-modal.ancho table thead th { font-size:12px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:#6b7385 !important; border-bottom:1px solid #eceef3 !important; }
body.modo-general .gen-modal.ancho table td { border-bottom:1px solid #f1f2f6 !important; font-size:13.5px; }
body.modo-general .gen-modal.ancho .gen-ir { border-radius:8px !important; border:1px solid #eceef3 !important; background:#fff !important; font-size:12.5px; }
body.modo-general .gen-modal.ancho .gen-ir:hover { color:#c2410c !important; border-color:#ffd3b8 !important; background:#fff4ec !important; }
body.modo-general .gen-modal.ancho #gen-prod-dias { margin:0 22px; }
body.modo-general .gen-modal.ancho .gen-modal-pie { display:flex; justify-content:flex-end; padding:14px 22px 18px; margin-top:8px; border-top:1px solid #eceef3; }
body.modo-general .gen-modal.ancho .gen-modal-pie .tv-boton { height:40px; padding:0 16px; border-radius:10px !important; border:1px solid #d9dce4 !important; background:#fff !important; color:#141a2e !important; font-weight:600; }
body.modo-general .gen-modal.ancho .gen-modal-pie .tv-boton:hover { border-color:#ffd3b8 !important; background:#fff4ec !important; color:#c2410c !important; }
@media (max-width:700px) { body.modo-general .gen-modal.ancho .gen-seis { grid-template-columns:repeat(3, minmax(0,1fr)); } body.modo-general .gen-modal.ancho .gen-seis .in-cifra:nth-child(4) { border-left:0; padding-left:22px; } }

/* Ventana de producto compacta: cabe en una sola vista sin desplazarse. */
body.modo-general .gen-modal.ancho { max-height:calc(100vh - 24px) !important; }
body.modo-general .gen-modal.ancho .gen-modal-cab { padding:14px 20px 12px; gap:12px; }
body.modo-general .gen-modal-foto { width:46px; height:46px; }
body.modo-general .gen-modal.ancho .gen-modal-tit h2 { font-size:18px; }
body.modo-general .gen-modal-completo { margin-top:1px; font-size:12.5px; }
body.modo-general .gen-modal.ancho .gen-modal-tit .caso-meta { margin-top:2px; font-size:12px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra { padding:10px 14px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra:first-child { padding-left:20px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra > span:first-of-type { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
body.modo-general .gen-modal.ancho .gen-seis .in-cifra strong { font-size:18px !important; }
body.modo-general .gen-modal.ancho h3 { margin:12px 20px 4px !important; font-size:13.5px !important; }
body.modo-general .gen-modal.ancho .gen-scroll { padding:0 20px; max-height:150px; overflow:auto; }
body.modo-general .gen-modal.ancho table th, body.modo-general .gen-modal.ancho table td { padding-top:6px !important; padding-bottom:6px !important; }
body.modo-general .gen-modal.ancho .gen-ir { padding:4px 10px !important; min-height:0 !important; }
body.modo-general .gen-modal.ancho #gen-prod-dias { margin:0 20px; }
body.modo-general .gen-modal.ancho .gen-modal-pie { padding:10px 20px 12px; margin-top:4px; }
body.modo-general .gen-modal.ancho .gen-modal-pie .tv-boton { height:36px; }

/* Ritmo diario: gráfica de alto fijo (280 px) en lugar de estirarse a toda la tarjeta; el texto de ayuda queda abajo. */
body.modo-general #app-shell #gen-ritmo { flex:none !important; height:280px !important; min-height:0 !important; margin-top:auto; }
body.modo-general #app-shell #gen-ritmo + .gen-dia-ayuda, body.modo-general #app-shell .gen-dia-ayuda { margin-bottom:auto; }

/* Sin espacio sobrante al final de la página: la última tarjeta termina con un margen normal. */
body.modo-general #app-shell #gen-cuerpo > :last-child, body.modo-general #app-shell #gen-cuerpo > .section:last-of-type { margin-bottom:0 !important; }
body.modo-general #app-shell main { padding-bottom:20px !important; min-height:0 !important; }
body.modo-general #app-shell #content, body.modo-general #app-shell .contenido-entra { min-height:0 !important; padding-bottom:0 !important; margin-bottom:0 !important; }
body.modo-general #app-shell #gen-cuerpo > .gen-mini-det:empty { display:none; }

/* ===== Mix operativo por tipo de venta (Taste + impeccable) =====
   La franja apilada arriba (delgada, una sola lectura del reparto) y debajo tres bloques iguales, uno por tipo,
   con la cifra grande, el % y una barra de su participación; la frase de resumen cierra la tarjeta. Llena la altura. */
body.modo-general #app-shell .section:has(> .gen-tipos), body.modo-general #app-shell .section:has(.gen-tipos) { display:flex !important; flex-direction:column; }
body.modo-general #app-shell .gen-tipos { display:flex !important; height:10px !important; min-height:10px; gap:3px; margin:18px 0 18px !important; background:none !important; border-radius:6px !important; overflow:hidden !important; flex:none; }
body.modo-general #app-shell .gen-tipos button { border-radius:0 !important; padding:0 !important; height:10px !important; min-height:0 !important; border:0 !important; box-shadow:none !important; }
body.modo-general #app-shell .gen-tipos button b, body.modo-general #app-shell .gen-tipos button span { display:none !important; }
body.modo-general #app-shell .section:has(.gen-tipos) > .gen-filas, body.modo-general #app-shell .section:has(.gen-tipos) .gen-filas:has([data-gen-tipo]) {
  display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; flex:1 1 auto; margin:0 !important; padding:0 !important; overflow:visible !important; -webkit-mask-image:none !important; mask-image:none !important; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tipo]) { display:block !important; }
body.modo-general #app-shell .gen-filas li:has([data-gen-tipo])::after { display:none !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] { display:flex !important; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; width:100%; height:100%; min-height:150px;
  padding:16px 18px !important; border-radius:12px !important; background:#f7f8fb !important; border:1px solid transparent !important; text-align:left; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
body.modo-general #app-shell .gen-filas [data-gen-tipo]:hover { background:#f1f3f7 !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo][aria-pressed="true"] { background:#fff !important; border-color:#d5d9e2 !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] > span:first-child { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--gx-texto); }
body.modo-general #app-shell .gen-filas [data-gen-tipo] .gen-punto { width:10px; height:10px; border-radius:3px; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] > span:nth-child(2) { display:none; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] b { margin-top:auto; font:700 26px/1.1 var(--gx-letra) !important; letter-spacing:-.025em !important; color:var(--gx-tinta) !important; font-variant-numeric:normal !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] em { font-size:13px !important; font-style:normal; color:var(--gx-tenue) !important; font-variant-numeric:normal !important; }
body.modo-general #app-shell .section:has(.gen-tipos) .fc-total { margin:16px 0 0 !important; padding:12px 14px; border-radius:10px; background:#f3f5f9; font-size:13px; color:var(--gx-texto); }
@media (max-width:700px) { body.modo-general #app-shell .section:has(.gen-tipos) .gen-filas:has([data-gen-tipo]) { grid-template-columns:1fr; } }

/* Mix: etiqueta, cifra y % juntos y centrados en el bloque; barra de participación al pie (la pone sellport-general.js). */
body.modo-general #app-shell .gen-filas [data-gen-tipo] { justify-content:center !important; gap:4px !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] b { margin-top:8px !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] .gen-tipo-barra { display:block; width:100%; height:6px; margin-top:12px; border-radius:99px; background:#e6e9f0; overflow:hidden; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] .gen-tipo-barra i { display:block; height:100%; border-radius:99px; }

/* Curva horaria (Taste + impeccable): el selector Por hora/Acumulado sube a la cabecera; la nota del pronóstico
   va en un recuadro gris al pie, como los resúmenes de las demás tarjetas. */
body.modo-general #app-shell .section:has(#gen-horas) { position:relative; display:flex; flex-direction:column; }
body.modo-general #app-shell .section:has(#gen-horas) .gen-der-solo { position:absolute; top:14px; right:18px; margin:0 !important; }
body.modo-general #app-shell #gen-horas { flex:1 1 auto; min-height:260px; }
body.modo-general #app-shell #gen-pron { margin:12px 0 0 !important; padding:12px 14px; border-radius:10px; background:#fff4ec; color:var(--gx-texto); font-size:13px; line-height:1.5; }
body.modo-general #app-shell #gen-pron:empty { display:none; }
body.modo-general #app-shell #gen-pron b { color:var(--gx-tinta); }

/* Curva horaria: sin la nota del pronóstico (como la maqueta). */
body.modo-general #app-shell #gen-pron { display:none !important; }
body.modo-general #app-shell #gen-horas { min-height:300px; }

/* Leyenda de la curva horaria debajo de la gráfica. */
body.modo-general #app-shell .gen-horas-ley { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }
body.modo-general #app-shell .gen-horas-ley button { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; font:400 12.5px var(--gx-letra); color:var(--gx-texto); cursor:pointer; }
body.modo-general #app-shell .gen-horas-ley button i { width:18px; display:inline-block; }
body.modo-general #app-shell .gen-horas-ley button b { color:var(--gx-tinta); font-weight:700; }
body.modo-general #app-shell .gen-horas-ley button.apagada { opacity:.4; }

/* Mix: la franja de reparto más gruesa (28 px), con el % dentro de los tramos grandes. */
body.modo-general #app-shell .gen-tipos { height:28px !important; min-height:28px !important; border-radius:8px !important; gap:3px; }
body.modo-general #app-shell .gen-tipos button { height:28px !important; display:flex !important; align-items:center; justify-content:flex-start; padding:0 10px !important; }
body.modo-general #app-shell .gen-tipos button:first-child { border-radius:8px 0 0 8px !important; } body.modo-general #app-shell .gen-tipos button:last-child { border-radius:0 8px 8px 0 !important; }
body.modo-general #app-shell .gen-tipos button b { display:block !important; position:static !important; font:700 12.5px var(--gx-letra) !important; color:#fff !important; text-shadow:none !important; }
body.modo-general #app-shell .gen-tipos button[style*="b9c2d8"] b, body.modo-general #app-shell .gen-tipos button[style*="B9C2D8"] b { color:#141a2e !important; }
body.modo-general #app-shell .gen-tipos button { justify-content:flex-start !important; text-align:left !important; }
body.modo-general #app-shell .gen-tipos { margin:16px 0 16px !important; }
body.modo-general #app-shell .gen-filas [data-gen-tipo] .gen-tipo-barra { height:12px !important; border-radius:6px !important; }

/* Franja del mix: 36 px y el % centrado vertical y horizontalmente en su tramo. */
body.modo-general #app-shell .gen-tipos { height:36px !important; min-height:36px !important; }
body.modo-general #app-shell .gen-tipos button { height:36px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; padding:0 6px !important; }
body.modo-general #app-shell .gen-tipos button b { margin:0 !important; line-height:1 !important; font-size:13.5px !important; }

/* Sin la descripción bajo «General»: el título y los filtros bastan. */
body.modo-general #app-shell .topbar #page-subtitle { display:none !important; }
body.modo-general #app-shell .topbar { min-height:44px !important; display:flex; align-items:center; }
@media (min-width:1100px) { body.modo-general #app-shell .gen-barra-filtros { top:-61px !important; } }

/* Sin título: la pestaña activa de la barra de arriba ya dice dónde estás. Los filtros quedan solos en su fila, a la derecha. */
body.modo-general #app-shell main > .topbar { display:none !important; }
body.modo-general #app-shell .gen-barra-filtros { position:static !important; justify-content:flex-end; margin:0 0 16px !important; }

/* Sello de frescura a la izquierda de la fila de filtros. */
body.modo-general #app-shell .gen-fresco { margin:0 auto 0 4px; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--gx-tenue); white-space:nowrap; }
body.modo-general #app-shell .gen-fresco i { width:7px; height:7px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 3px rgba(34,160,107,.15); }
@media (max-width:1100px) { body.modo-general #app-shell .gen-fresco { display:none; } }
body.modo-general #app-shell .gen-fresco { align-self:center; }

/* Saludo arriba del sello. */
body.modo-general #app-shell .gen-fresco { flex-direction:column; align-items:flex-start; gap:4px; }
body.modo-general #app-shell .gen-fresco b { font:700 22px/1.15 var(--gx-letra); letter-spacing:-.025em; color:var(--gx-tinta); }
body.modo-general #app-shell .gen-fresco span { display:inline-flex; align-items:center; gap:8px; }
body.modo-general #app-shell .gen-fresco span i { width:7px; height:7px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 3px rgba(34,160,107,.15); }
body.modo-general #app-shell .gen-fresco > i { display:none; }

/* Ventana de detalle (día, marketplace, tienda, hora, tipo de venta): mismo estilo que la ventana de producto. */
.gen-det-capa { position:fixed; inset:0; z-index:1900; display:grid; place-items:center; padding:16px; background:rgba(20,26,46,.38); }
.gen-det-ventana { width:min(560px, 100%); max-height:calc(100vh - 32px); overflow:auto; border-radius:16px; background:#fff; box-shadow:0 30px 70px -24px rgba(20,26,46,.45);
  font-family:"Schibsted Grotesk", Inter, sans-serif; color:#141a2e; animation:gen-modal-entra .22s cubic-bezier(.22,1,.36,1); }
.gen-det-ventana .bi { font-family:bootstrap-icons !important; }
.gen-det-ventana .gen-dia-det { margin:0 !important; padding:0 0 18px; border:0 !important; background:none !important; }
.gen-det-ventana .gen-dia-cab { display:flex; align-items:center; gap:12px; padding:18px 20px 14px; margin:0 0 12px; border-bottom:1px solid #eceef3; }
.gen-det-ventana .gen-dia-cab > b { font-size:18px; font-weight:700; letter-spacing:-.02em; }
.gen-det-ventana .gen-det-x { margin-left:auto; width:34px; height:34px; display:grid; place-items:center; border:0 !important; border-radius:8px; background:#f3f4f8 !important; color:#4b5568 !important; text-decoration:none !important; }
.gen-det-ventana .gen-det-x:hover { background:#e9ebf1 !important; }
.gen-det-ventana .gen-dia-det > :not(.gen-dia-cab) { margin-left:20px !important; margin-right:20px !important; }
.gen-det-ventana .gen-dia-top li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #f1f2f6; font-size:13.5px; }
.gen-det-ventana .gen-dia-top .pq-link { color:#141a2e !important; text-align:left; border:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-det-ventana .gen-dia-top .pq-link:hover { color:#c2410c !important; }
.gen-det-ventana .tv-boton, .gen-det-ventana .gen-det-filtrar { border-radius:10px !important; }

/* ===== Ventanas de detalle con contenido (Taste + impeccable) ===== */
.gen-det-ventana { width:min(720px, 100%); }
.gen-det-ventana .dv-cuerpo { margin:0 !important; }
.gen-det-ventana .dv-cifras { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-bottom:1px solid #eceef3; margin:-12px 0 0 !important; }
.gen-det-ventana .dv-cifras > div { padding:12px 20px; border-left:1px solid #eceef3; display:flex; flex-direction:column; gap:4px; }
.gen-det-ventana .dv-cifras > div:first-child { border-left:0; }
.gen-det-ventana .dv-cifras span { font-size:12px; color:#6b7385; }
.gen-det-ventana .dv-cifras strong { font-size:19px; font-weight:650; letter-spacing:-.02em; color:#141a2e; }
.gen-det-ventana .dv-lectura { margin:12px 20px 0; padding:10px 12px; border-radius:10px; background:#f3f5f9; font-size:13px; line-height:1.5; color:#4b5568; }
.gen-det-ventana .dv-lectura b { color:#141a2e; }
.gen-det-ventana h4 { margin:14px 20px 6px; font-size:13px; font-weight:650; color:#141a2e; }
.gen-det-ventana .dv-graf { margin:0 20px; }
.gen-det-ventana .dv-cols { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.gen-det-ventana .dv-cols > div:only-child { grid-column:1 / -1; }
.gen-det-ventana .dv-barras, .gen-det-ventana .dv-prods { list-style:none; margin:0 20px; padding:0; }
.gen-det-ventana .dv-barras li { display:grid; grid-template-columns:minmax(0,1fr) 80px auto; align-items:center; gap:10px; padding:5px 0; font-size:13px; }
.gen-det-ventana .dv-barras li span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#141a2e; }
.gen-det-ventana .dv-barras li i { height:8px; border-radius:4px; background:#eef0f5; overflow:hidden; display:block; }
.gen-det-ventana .dv-barras li em { display:block; height:100%; border-radius:4px; background:#3f3f46; }
.gen-det-ventana .dv-barras li b, .gen-det-ventana .dv-prods li b { font-weight:700; white-space:nowrap; color:#141a2e; }
.gen-det-ventana .dv-prods { counter-reset:p; }
.gen-det-ventana .dv-prods li { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13px; border-bottom:1px solid #f1f2f6; counter-increment:p; }
.gen-det-ventana .dv-prods li::before { content:counter(p); width:16px; color:#9aa1b2; font-weight:600; }
.gen-det-ventana .dv-prods button { flex:1; min-width:0; padding:0; border:0; background:none; text-align:left; color:#141a2e; font:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.gen-det-ventana .dv-prods button:hover { color:#c2410c; }
.gen-det-ventana .dv-pie { display:flex; justify-content:flex-end; margin:14px 0 0 !important; padding:12px 20px 0; border-top:1px solid #eceef3; }
.gen-det-ventana .dv-filtrar { height:36px; padding:0 14px; border-radius:10px; border:1px solid #d9dce4 !important; background:#fff !important; color:#141a2e !important; font-weight:600; font-size:13px; text-decoration:none !important; }
.gen-det-ventana .dv-filtrar:hover { border-color:#ffd3b8 !important; background:#fff4ec !important; color:#c2410c !important; }
@media (max-width:640px) { .gen-det-ventana .dv-cifras { grid-template-columns:1fr 1fr; } .gen-det-ventana .dv-cols { grid-template-columns:1fr; } }
.gen-det-ventana .dv-prods li { padding:3px 0; } .gen-det-ventana .dv-barras li { padding:3px 0; } .gen-det-ventana h4 { margin-top:10px; }

/* Tendencia · Mix: leyenda con la participación promedio de cada canal. */
body.modo-general #app-shell .gen-mix-ley { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 8px; font-size:13px; color:var(--gx-texto); }
body.modo-general #app-shell .gen-mix-ley span { display:inline-flex; align-items:center; gap:7px; }
body.modo-general #app-shell .gen-mix-ley i { width:10px; height:10px; border-radius:3px; display:inline-block; }
body.modo-general #app-shell .gen-mix-ley b { color:var(--gx-tinta); font-weight:700; }

/* Tendencia · Mix (Taste + impeccable): tabla de reparto por canal, sin áreas apiladas. */
body.modo-general #app-shell .gen-mixc-cab, body.modo-general #app-shell .gen-mixc li { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(200px,2fr) 110px minmax(120px,1fr); align-items:center; gap:18px; }
body.modo-general #app-shell .gen-mixc-cab { padding:0 4px 8px; border-bottom:1px solid #eceef3; font-size:12px; font-weight:600; color:var(--gx-tenue); }
body.modo-general #app-shell .gen-mixc-cab span:nth-child(3) { text-align:right; }
body.modo-general #app-shell .gen-mixc { list-style:none; margin:0; padding:0; }
body.modo-general #app-shell .gen-mixc li { padding:10px 4px; border-bottom:1px solid #f1f2f6; }
body.modo-general #app-shell .gen-mixc-nom { display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--gx-tinta); }
body.modo-general #app-shell .gen-mixc-nom img { width:24px; height:24px; border-radius:6px; }
body.modo-general #app-shell .gen-mixc-barra { display:flex; align-items:center; gap:10px; }
body.modo-general #app-shell .gen-mixc-barra i { height:12px; border-radius:3px; background:#3f3f46; min-width:3px; }
body.modo-general #app-shell .gen-mixc li:first-child .gen-mixc-barra i { background:#3f3f46; }
body.modo-general #app-shell .gen-mixc-barra b { font-size:14px; font-weight:700; color:var(--gx-tinta); white-space:nowrap; }
body.modo-general #app-shell .gen-mixc-dpp { text-align:right; font-size:13px; font-weight:700; color:var(--gx-tenue); white-space:nowrap; }
body.modo-general #app-shell .gen-mixc-linea svg { display:block; width:100%; height:30px; }
body.modo-general #app-shell .gen-mixc-nota { margin:10px 4px 0; font-size:12.5px; color:var(--gx-tenue); }
@media (max-width:760px) { body.modo-general #app-shell .gen-mixc-cab { display:none; } body.modo-general #app-shell .gen-mixc li { grid-template-columns:1fr auto; } body.modo-general #app-shell .gen-mixc-linea { display:none; } }
body.modo-general #app-shell .gen-mixc-dpp.gen-sube { color:#15803d !important; } body.modo-general #app-shell .gen-mixc-dpp.gen-baja { color:#c64658 !important; }
body.modo-general #app-shell .gen-mixc-linea { display:block; width:100%; } body.modo-general #app-shell .gen-mixc-linea svg { width:100% !important; max-width:none !important; }
.gen-det-ventana .dv-cols > .dv-ancho { grid-column:1 / -1; }

/* Al abrir una ventana el tablero se vuelve a pintar: sin repetir la entrada de las tarjetas ni el conteo de cifras,
   y sin que el detalle se asome dentro de su tarjeta antes de pasar a la ventana (eso movía la página). */
body.modo-general.gen-listo #app-shell #gen-cuerpo *, body.modo-general.gen-listo #app-shell #gen-cuerpo *::before, body.modo-general.gen-listo #app-shell #gen-cuerpo *::after { animation:none !important; }
body.modo-general #app-shell #gen-cuerpo .gen-dia-det { display:none !important; }
.gen-det-ventana .gen-dia-det { display:block !important; }

/* Menú «Ordenar» propio: agrupado (Venta / Rentabilidad) y explicado, en lugar del select del navegador. */
body.modo-general #app-shell .sp-orden { position:relative; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
body.modo-general #app-shell .sp-orden > span { font-size:13px; font-weight:500; color:var(--gx-tenue); }
body.modo-general #app-shell .sp-orden-btn { display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 12px; border:1px solid #d9dce4; border-radius:10px; background:#fff; font:600 13.5px var(--gx-letra); color:var(--gx-tinta); cursor:pointer; transition:border-color .15s; }
body.modo-general #app-shell .sp-orden-btn:hover, body.modo-general #app-shell .sp-orden-btn[aria-expanded="true"] { border-color:#aeb5c4; }
body.modo-general #app-shell .sp-orden-btn:focus-visible { outline:2px solid var(--gx-azul); outline-offset:2px; }
body.modo-general #app-shell .sp-orden-btn i { color:#9aa1b2; font-size:11px; transition:transform .15s; }
body.modo-general #app-shell .sp-orden-btn[aria-expanded="true"] i { transform:rotate(180deg); }

/* Catálogo: filtros propios, encabezados que ordenan y páginas. */
body.modo-general #app-shell .sp-cat-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
body.modo-general #app-shell .sp-cat-filtros .fc-f-res { margin-left:auto; }
body.modo-general #app-shell .sp-th { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:none; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; white-space:nowrap; }
body.modo-general #app-shell .sp-th i { font-size:11px; opacity:0; transition:opacity .15s; }
body.modo-general #app-shell .sp-th:hover i { opacity:.45; }
body.modo-general #app-shell .sp-th.activo { color:var(--gx-azul); }
body.modo-general #app-shell .sp-th.activo i { opacity:1; }
body.modo-general #app-shell .sp-th:focus-visible { outline:2px solid var(--gx-azul); outline-offset:2px; border-radius:4px; }
body.modo-general #app-shell .sp-cat-pags { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; font-size:13px; color:var(--gx-tenue); }
body.modo-general #app-shell .sp-cat-pags button { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid #d9dce4; border-radius:10px; background:#fff; font:600 13px var(--gx-letra); color:var(--gx-tinta); cursor:pointer; }
body.modo-general #app-shell .sp-cat-pags button:hover:not([disabled]) { border-color:#aeb5c4; }
body.modo-general #app-shell .sp-cat-pags button[disabled] { opacity:.4; cursor:default; }
body.modo-general #app-shell .gen-cat-tabla td.num .caso-meta { display:inline; }