/* Vista de cada plataforma (Mercado Libre, Walmart, Coppel, TikTok, Amazon, Mercado Pago, ERP…) con las mismas reglas
   del General: banda azul pizarra arriba con el encabezado de la página en blanco y la primera fila de tarjetas
   montada mitad en ella (sp-escena.js mide hasta dónde llega), suelo gris acero, tarjetas blancas sin borde, tinta
   casi negra y el naranja sólo como acento. No cambia el contenido de ninguna tarjeta. La barra superior, el riel y
   el engrane ya son los mismos para todo el portal (sp-barra.css, sp-riel.css, sp-engrane.css). */
html body:not(.modo-general) {
  --sp-marino:#4b566b; --sp-marino-hondo:#3e4759; --sp-suelo:#e8ebef; --sp-tinta:#16191f; --sp-texto:#414d5c; --sp-tenue:#5f6b7a;
  --sp-linea:#e9ebed; --sp-riel:#ebedf0; --sp-foco:0 0 0 2px #fff, 0 0 0 4px #c2410c;
}
html body:not(.modo-general) { background:var(--sp-suelo) !important; }

/* Suelo y banda. */
html body:not(.modo-general) #app-shell > main {
  position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, var(--sp-marino) 0, var(--sp-marino-hondo) var(--sp-banda, 200px), transparent var(--sp-banda, 200px)) no-repeat,
    var(--sp-suelo) !important;
}
html body:not(.modo-general) #app-shell > main::before { content:""; position:absolute; left:0; right:0; top:0; height:var(--sp-banda, 200px); z-index:-1; pointer-events:none;
  background:radial-gradient(45% 140% at 100% 0%, rgba(255,150,100,.40), rgba(255,190,150,.16) 45%, transparent 72%), radial-gradient(40% 120% at 0% 0%, rgba(255,255,255,.07), transparent 70%); }

/* Encabezado de la página sobre la banda: ruta y título en blanco, sin la etiqueta «OPERACIÓN E-COMMERCE». */
html body:not(.modo-general) #app-shell .topbar { border-bottom:0 !important; padding-bottom:6px !important; margin-bottom:18px !important; }
html body:not(.modo-general) #app-shell .topbar .micro-label { display:none !important; }
html body:not(.modo-general) #app-shell .breadcrumb-line, html body:not(.modo-general) #app-shell .breadcrumb-line * { color:#c6ccd5 !important; }
html body:not(.modo-general) #app-shell .breadcrumb-line #page-breadcrumb { color:#fff !important; }
html body:not(.modo-general) #app-shell #page-title { margin-top:6px !important; font:700 30px/1.1 "Schibsted Grotesk", Inter, sans-serif !important; letter-spacing:-.03em !important; color:#fff !important; }
html body:not(.modo-general) #app-shell #page-subtitle { color:#d5dae2 !important; font-size:13.5px !important; margin-top:6px !important; }
html body:not(.modo-general) #app-shell .topbar :is(.btn, button, a.btn):not(#aviso-novedades-ir) { background:#fff !important; color:var(--sp-tinta) !important; border:0 !important; border-radius:10px !important; box-shadow:0 1px 2px rgba(0,0,0,.2) !important; }

/* Tarjetas: blancas, sin borde, radio 18, sombra mínima. */
html body:not(.modo-general) #app-shell :is(.section, .in-tarjeta, .metric, .card) {
  border:0 !important; border-radius:18px !important; background:#fff !important; box-shadow:0 1px 2px rgba(22,25,31,.06) !important;
}
html body:not(.modo-general) #app-shell :is(.section, .in-tarjeta):hover { box-shadow:0 1px 2px rgba(22,25,31,.06) !important; transform:none !important; }
html body:not(.modo-general) #app-shell #content > :first-child :is(.section, .in-tarjeta), html body:not(.modo-general) #app-shell #content > .section:first-child {
  box-shadow:0 1px 2px rgba(22,25,31,.06), 0 18px 40px -24px rgba(13,18,28,.45) !important;
}
/* Títulos y cifras en tinta; textos secundarios en gris pizarra. */
html body:not(.modo-general) #app-shell :is(.section, .in-tarjeta) :is(h2, h3, .in-cab h2) { color:var(--sp-tinta) !important; letter-spacing:-.01em; }
html body:not(.modo-general) #app-shell :is(.in-cifra strong, .in-cifra b, .vc-cifras strong, .vc-dinero strong) { color:var(--sp-tinta) !important; letter-spacing:-.02em; }

/* Controles: segmentados en riel gris con la opción elegida en blanco; campos y botones blancos con línea fina. */
html body:not(.modo-general) #app-shell :is(.chips.seg-filtros, .seg-filtros, .fc-chips) { background:var(--sp-riel) !important; border:0 !important; border-radius:10px !important; }
html body:not(.modo-general) #app-shell :is(.seg-filtros, .fc-chips) .chip { color:var(--sp-texto) !important; background:none !important; border:0 !important; }
html body:not(.modo-general) #app-shell :is(.seg-filtros, .fc-chips) .chip:is([aria-pressed="true"], .active) { background:#fff !important; color:var(--sp-tinta) !important; box-shadow:0 1px 3px rgba(22,25,31,.12) !important; }
html body:not(.modo-general) #app-shell #content :is(input[type="search"], input[type="text"], input[type="date"], select, .form-control, .form-select) {
  border:1px solid #d9dce4 !important; border-radius:10px !important; background-color:#fff !important; color:var(--sp-tinta) !important; box-shadow:none !important;
}
html body:not(.modo-general) #app-shell #content :is(input, select, .form-control, .form-select):focus { border-color:#c2410c !important; box-shadow:0 0 0 3px rgba(194,65,12,.15) !important; outline:0 !important; }
html body:not(.modo-general) #app-shell #content :is(.btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-outline-primary, .vc-nav button, .vc-rango button) {
  background:#fff !important; color:var(--sp-tinta) !important; border:1px solid #d9dce4 !important; border-radius:10px !important; box-shadow:none !important;
}
html body:not(.modo-general) #app-shell #content :is(.btn-outline-secondary, .btn-light, .btn-outline-dark, .btn-outline-primary, .vc-nav button, .vc-rango button):hover:not([disabled]) { background:#f5f6f8 !important; border-color:#c4c9d2 !important; }

/* Tablas: divisores finos, encabezados en gris sin versalitas. */
html body:not(.modo-general) #app-shell #content table th { color:var(--sp-tenue) !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; border-color:var(--sp-linea) !important; }
html body:not(.modo-general) #app-shell #content table td { border-color:var(--sp-linea) !important; }

/* Pie: igual que el General, sin pie. */
html body:not(.modo-general) #app-shell .app-footer { display:none !important; }

/* Pantallas angostas: el título un poco más chico. */
@media (max-width:640px) { html body:not(.modo-general) #app-shell #page-title { font-size:24px !important; } }

/* Buscador con ícono: el borde lo lleva la caja, no el campo de adentro (salía doble). */
html body:not(.modo-general) #app-shell #content .bf-buscar { border:1px solid #d9dce4 !important; border-radius:10px !important; background:#fff !important; }
html body:not(.modo-general) #app-shell #content .bf-buscar input { border:0 !important; box-shadow:none !important; background:transparent !important; }
html body:not(.modo-general) #app-shell #content .bf-buscar:focus-within { border-color:#c2410c !important; box-shadow:0 0 0 3px rgba(194,65,12,.15) !important; }

/* Encabezado de tarjeta del estilo anterior: sin la etiqueta en versalitas («OPERACIÓN») ni el subrayado naranja; queda
   el título con una línea fina. */
html body:not(.modo-general) #app-shell .section-kicker { display:none !important; }
html body:not(.modo-general) #app-shell .section-head { border-bottom-color:var(--sp-linea) !important; }
html body:not(.modo-general) #app-shell .section-head::after { display:none !important; }

/* Encabezado de la página (Taste + impeccable): compacto, sin logo (la plataforma ya se ve en el riel). El título y,
   en una sola línea debajo, la tienda y la descripción u hora de los datos. Así la banda es baja y las tarjetas suben. */
html body:not(.modo-general) #app-shell .topbar { padding-top:14px !important; margin-bottom:16px !important; align-items:flex-end !important; }
html body:not(.modo-general) #app-shell .sp-cab { display:flex !important; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:6px; }
html body:not(.modo-general) #app-shell .sp-cab > #page-title { flex:1 1 100%; margin:0 !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line { order:2; margin:0 !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle { order:3; margin:0 !important; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line + * { order:1; }
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line > :not(#breadcrumb-tienda) { display:none !important; }
html body:not(.modo-general) #app-shell .sp-cab #breadcrumb-tienda { font-size:13.5px !important; font-weight:500 !important; color:#d5dae2 !important; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle::before { content:"·"; margin-right:10px; color:#9aa3b0; }
html body:not(.modo-general) #app-shell #page-subtitle.sp-fresco { display:inline-flex; align-items:center; gap:8px; }
html body:not(.modo-general) #app-shell .sp-cab > #page-subtitle.sp-fresco::before { content:""; margin-right:0; width:7px; height:7px; border-radius:50%; background:#3fbf7f; box-shadow:0 0 0 3px rgba(63,191,127,.25); }

/* Lo que la página pone a la derecha del título (p. ej. «Sin pendientes» en Preguntas) se queda a la derecha. */
html body:not(.modo-general) #app-shell .topbar { flex-wrap:nowrap !important; gap:24px; }
html body:not(.modo-general) #app-shell .topbar > .sp-cab { flex:1 1 0 !important; min-width:0; }
html body:not(.modo-general) #app-shell .topbar > :not(.sp-cab) { flex:none; }
@media (max-width:900px) { html body:not(.modo-general) #app-shell .topbar { flex-wrap:wrap !important; } }

/* Aviso de datos nuevos (Taste + impeccable): ya no es una franja que empuja las tarjetas. Va en la misma línea de la
   hora de los datos, en el encabezado: «· Datos nuevos de las 6:39 p.m. Actualizar», con «Actualizar» como enlace. */
html body .sp-cab > #aviso-novedades.aviso-novedades, html body #aviso-novedades.sp-en-cab {
  order:4; display:inline-flex !important; flex-wrap:nowrap !important; align-items:center; gap:8px; width:auto;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
  color:#ffd2b8 !important; font:500 13.5px "Schibsted Grotesk", Inter, sans-serif;
}
html body #aviso-novedades.sp-en-cab .punto { width:7px !important; height:7px !important; background:#ff8a3d !important; box-shadow:0 0 0 3px rgba(255,138,61,.25); }
html body #aviso-novedades.sp-en-cab span { flex:none !important; white-space:nowrap; }
html body #app-shell #aviso-novedades.sp-en-cab button { height:auto !important; box-shadow:none !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; color:#fff !important; font-weight:600 !important; font-size:13.5px; text-decoration:underline; text-underline-offset:3px; }
html body #aviso-novedades.sp-en-cab button:hover:not([disabled]) { color:#ffd2b8 !important; }
/* En el General, junto a la hora de los datos del saludo. */
html body .gen-fresco > #aviso-novedades.sp-en-cab { color:#ffd2b8 !important; }