/* Encabezado delgado (Taste + impeccable), mismo criterio en todo el portal: la banda sólo carga lo que no se ve en
   otro lado. El título de la sección («Inicio», «Ventas»…) ya está marcado en el menú, así que en las páginas de cada
   plataforma no se repite; queda una sola línea con la tienda y la hora de los datos. En el General, el saludo (o la
   tienda) y la hora de los datos van en la misma línea, y los filtros se ven como parte de la banda, no como cajas
   blancas. En el General de una empresa no hay filtro de e-commerce ni de tienda: ya se eligió la tienda. */

/* —— General y General de una empresa —— */
html body.modo-general #app-shell .gen-barra-filtros { padding-top:0 !important; margin-bottom:16px !important; align-items:center !important; }
html body.modo-general #app-shell .gen-fresco { flex-direction:row !important; flex-wrap:wrap; align-items:baseline !important; column-gap:14px !important; row-gap:4px !important; }
html body.modo-general #app-shell .gen-fresco b { font-size:24px !important; }
html body.modo-general #app-shell .gen-fresco .sp-razon { font-size:13.5px !important; color:#d5dae2 !important; }
html body.modo-general #app-shell .gen-fresco > span { font-size:13.5px; }

/* Filtros sobre la banda: sin caja blanca, un vidrio apenas marcado con texto claro. */
html body.modo-general #app-shell .gen-barra-filtros .gen-campo { background:rgba(255,255,255,.13) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), 0 1px 2px rgba(0,0,0,.12) !important; border-radius:9px !important; height:34px !important; transition:background-color var(--duration-quick, 150ms) ease-out; }
html body.modo-general #app-shell .gen-barra-filtros .gen-campo:hover { background:rgba(255,255,255,.2) !important; }
html body.modo-general #app-shell .gen-barra-filtros .gen-campo:focus-within { box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 3px rgba(255,170,120,.35) !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn, .sp-campo-btn) { height:34px !important; min-height:34px !important; color:#fff !important; font-size:13.5px !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn .sp-et, .gen-periodo-btn em, .sp-campo-btn > span) { color:#cfd5de !important; font-size:13px !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn .bi-chevron-down, .sp-campo-btn > i) { color:#b9c1cc !important; }
html body.modo-general #app-shell .gen-barra-filtros .gen-periodo-btn b { font-weight:600 !important; }

/* General de una empresa: sin filtro de e-commerce ni de tienda. */
html body.gen-empresa #app-shell .gen-barra-filtros > .sp-campo { display:none !important; }

/* —— Páginas de cada plataforma —— */
html body:not(.modo-general) #app-shell .topbar { padding-top:12px !important; padding-bottom:0 !important; margin-bottom:14px !important; align-items:center !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-title { display:none !important; }
html body:not(.modo-general) #app-shell .sp-cab #breadcrumb-tienda { font-size:15px !important; font-weight:600 !important; color:#fff !important; letter-spacing:-.01em; }
html body.modo-general #app-shell .gen-barra-filtros .gen-periodo-btn { background:transparent !important; border:0 !important; box-shadow:none !important; }
html body.modo-general #app-shell .gen-barra-filtros .gen-periodo-btn:hover { background:transparent !important; }

/* Para gente grande: filtros y textos de la banda más grandes y con más contraste (todo por encima de 7:1 sobre la
   banda), objetivo de clic de 40 px; se conserva el vidrio translúcido. */
html body.modo-general #app-shell .gen-barra-filtros .gen-campo { height:40px !important; background:rgba(255,255,255,.16) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.38), 0 1px 3px rgba(0,0,0,.18) !important; border-radius:10px !important; }
html body.modo-general #app-shell .gen-barra-filtros .gen-campo:hover { background:rgba(255,255,255,.24) !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn, .sp-campo-btn) { height:40px !important; min-height:40px !important; font-size:15px !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn .sp-et, .gen-periodo-btn em, .sp-campo-btn > span) { color:#e6eaf0 !important; font-size:14.5px !important; }
html body.modo-general #app-shell .gen-barra-filtros :is(.gen-periodo-btn .bi-chevron-down, .sp-campo-btn > i) { color:#fff !important; font-size:13px !important; }
html body.modo-general #app-shell .gen-fresco b { font-size:26px !important; }
html body.modo-general #app-shell .gen-fresco :is(.sp-razon, > span) { font-size:15px !important; color:#e6eaf0 !important; }
html body:not(.modo-general) #app-shell .sp-cab #breadcrumb-tienda { font-size:16px !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle, html body #aviso-novedades.sp-en-cab, html body #app-shell #aviso-novedades.sp-en-cab button { font-size:15px !important; }
html body:not(.modo-general) #app-shell #page-subtitle { color:#e6eaf0 !important; }

/* La hora de los datos va abajo del título (el saludo o la tienda), en su propio renglón con la razón social. */
html body.modo-general #app-shell .gen-fresco b { flex:1 1 100%; }
html body.modo-general #app-shell .gen-fresco { row-gap:6px !important; }

/* General de una empresa: periodo y, debajo, la hora de los datos, alineados a la derecha. */
html body.modo-general #app-shell .gen-barra-filtros > .sp-der { display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-left:auto; }
html body.modo-general #app-shell .gen-barra-filtros > .sp-der > span { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#e6eaf0; white-space:nowrap; }
html body.modo-general #app-shell .gen-barra-filtros > .sp-der > span i { width:7px; height:7px; border-radius:50%; background:#22a06b; box-shadow:0 0 0 3px rgba(34,160,107,.25); }
@media (max-width:1100px) { html body.modo-general #app-shell .gen-barra-filtros > .sp-der { align-items:flex-start; margin-left:0; flex:1 1 100%; } html body.modo-general #app-shell .gen-barra-filtros > .sp-der > span { white-space:normal; } }
html body.modo-general #app-shell .gen-barra-filtros > .sp-der > .gen-campo { flex:none !important; }
@media (max-width:1100px) { html body.modo-general #app-shell .gen-barra-filtros > .sp-der { align-items:stretch; } html body.modo-general #app-shell .gen-barra-filtros > .sp-der > span { align-items:baseline; } html body.modo-general #app-shell .gen-barra-filtros > .sp-der > span i { flex:none; transform:translateY(-1px); } }

/* Páginas de cada plataforma: la tienda de titular (como el General de una empresa) con su razón social chica, y la
   hora de los datos a la derecha, en el mismo renglón. */
html body:not(.modo-general) #app-shell .sp-cab { align-items:center !important; column-gap:16px !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line { display:none !important; }
html body:not(.modo-general) #app-shell .sp-cab > .sp-tienda { order:0; flex:1 1 auto; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
html body:not(.modo-general) #app-shell .sp-cab > .sp-tienda b { font:700 26px/1.15 "Schibsted Grotesk", Inter, sans-serif; letter-spacing:-.025em; color:#fff; }
html body:not(.modo-general) #app-shell .sp-cab > .sp-tienda em { font-style:normal; font-size:15px; font-weight:500; color:#e6eaf0; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle { order:3; margin-left:auto !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle.sp-fresco::before { content:""; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle:not(.sp-fresco)::before { content:none; }
@media (max-width:700px) { html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle { margin-left:0 !important; flex-basis:100%; } html body:not(.modo-general) #app-shell .sp-cab > .sp-tienda b { font-size:22px; } }
/* Si en lugar de la hora la página trae una descripción, va abajo del titular, a la izquierda. */
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle:not(.sp-fresco) { flex-basis:100%; margin-left:0 !important; text-align:left; }

/* Titular de las páginas de plataforma (lo eligió la usuaria): la ruta del portal, «Tienda / Sección», en una línea:
   la tienda en blanco y la sección en gris claro. Sin el titular partido ni la etiqueta en versalitas. */
html body:not(.modo-general) #app-shell .sp-cab > .sp-tienda { display:none !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line { display:flex !important; order:0; flex:1 1 auto; min-width:0; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line > * { display:inline !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line #breadcrumb-tienda { font:700 20px/1.2 "Schibsted Grotesk", Inter, sans-serif !important; letter-spacing:-.015em; color:#fff !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line > span[aria-hidden="true"] { font-size:20px; color:#9aa3b0 !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line #page-breadcrumb { font:500 20px/1.2 "Schibsted Grotesk", Inter, sans-serif !important; color:#c6ccd5 !important; }
@media (max-width:700px) { html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line :is(#breadcrumb-tienda, #page-breadcrumb, span[aria-hidden="true"]) { font-size:17px !important; } }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line > :not(#breadcrumb-tienda) { display:inline !important; }

/* Ajuste (1-nov): titular más chico, «Datos al…» abajo del titular y más aire antes de las tarjetas. */
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line :is(#breadcrumb-tienda, #page-breadcrumb, span[aria-hidden="true"]) { font-size:17px !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle { flex-basis:100%; margin-left:0 !important; }
html body:not(.modo-general) #app-shell .sp-cab { row-gap:6px !important; }
html body:not(.modo-general) #app-shell .topbar { padding-top:16px !important; margin-bottom:24px !important; }
@media (max-width:700px) { html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line :is(#breadcrumb-tienda, #page-breadcrumb, span[aria-hidden="true"]) { font-size:16px !important; } }

/* Monitores anchos (≥1900 px): el contenido tenía un tope de 1800 px (ui.css) y se quedaba pegado a la izquierda, con una
   franja vacía a la derecha. La página usa todo el ancho, como la barra de arriba (2026-11-03). */
html body #app-shell > main { max-width:none !important; }