/* Tema visual de la vista General: «Banda AWS» sobre gris perla de Apple. Arriba, una banda ancha en el azul marino
   de AWS con el saludo y los filtros; «Venta del periodo» se monta mitad sobre la banda y mitad sobre el gris, y
   eso amarra las tarjetas al fondo (sp-escena.js mide hasta dónde llega la banda). Debajo, gris perla liso con
   tarjetas blancas sin borde. Tres colores y nada más: marino, gris perla y el naranja de Sellport como acento.
   Va al final: sólo redefine tonos, radios y fondos, no mueve nada. */
body.modo-general {
  --gx-tinta:#16191f; --gx-texto:#414d5c; --gx-tenue:#5f6b7a; --gx-linea:#e9ebed; --gx-azul:#16191f; --gx-suelo:#f5f5f7;
  --sp-marino:#232f3e; --sp-marino-hondo:#161e2d; --sp-gris:#f5f5f7; --sp-suelo:#e8ebef; --sp-riel:#ebedf0;
  --sp-naranja:#ff6a1a; --sp-naranja-claro:#ff8a3d; --sp-naranja-texto:#c2410c;
  --sp-foco:0 0 0 2px #fff, 0 0 0 4px #c2410c;
  --sp-sombra:0 1px 2px rgba(22,25,31,.06);
  --sp-sombra-alta:0 4px 14px rgba(22,25,31,.08), 0 24px 48px -24px rgba(22,25,31,.28);
}

/* Suelo: gris acero de AWS (un paso más oscuro que el perla, para que las tarjetas blancas resalten), y la banda marino arriba hasta la mitad de «Venta del periodo». */
html body.modo-general { background:var(--sp-suelo) !important; }
body.modo-general #app-shell main {
  background:
    linear-gradient(180deg, var(--sp-marino) 0, var(--sp-marino-hondo) var(--sp-banda, 230px), transparent var(--sp-banda, 230px)) no-repeat,
    var(--sp-suelo) !important;
}
/* Degradado naranja en la banda: el marino se calienta hacia la derecha hasta el naranja de Sellport, con una luz
   que sube desde la esquina de abajo, como el horizonte de las páginas de AWS. */
body.modo-general #app-shell main { position:relative; isolation:isolate; }
body.modo-general #app-shell main::before { content:""; position:absolute; left:0; right:0; top:0; height:var(--sp-banda, 230px); z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 120% at 100% 100%, rgba(255,106,26,.55), rgba(255,106,26,.18) 45%, transparent 72%),
    linear-gradient(100deg, transparent 35%, rgba(255,106,26,.10) 65%, rgba(255,138,61,.28) 100%); }

/* Barra superior: blanca de Apple con línea fina. */
body.modo-general #app-shell .topnav { background:rgba(255,255,255,.96) !important; border-bottom:1px solid #e3e5e8 !important; box-shadow:none !important; }
@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:var(--sp-riel) !important; color:var(--gx-tinta) !important; border-radius:10px !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(--sp-naranja-texto) !important; }
  body.modo-general #app-shell #navigation .nav-dropdown-toggle:hover, body.modo-general #app-shell #navigation a.plain-link:hover { background:var(--sp-gris) !important; border-radius:10px !important; }
}
body.modo-general #app-shell .topnav .role { background:var(--sp-riel) !important; color:var(--gx-texto) !important; }

/* Sobre la banda: saludo en blanco con la última palabra en naranja, hora de los datos en gris claro. */
body.modo-general #app-shell .gen-barra-filtros { padding-top:10px; margin-bottom:22px !important; }
body.modo-general #app-shell .gen-fresco b { font:700 30px/1.1 var(--gx-letra) !important; letter-spacing:-.03em !important; color:#fff !important; }
body.modo-general #app-shell .gen-fresco b .sp-clic { color:var(--sp-naranja-claro) !important; }
body.modo-general #app-shell .gen-fresco > span { color:#c6ccd5 !important; }
body.modo-general #app-shell .gen-fresco span i { box-shadow:0 0 0 3px rgba(34,160,107,.25) !important; }
/* Filtros: píldoras blancas sobre el marino. */
body.modo-general #app-shell .gen-campo, body.modo-general #app-shell .gen-periodo-btn { border:0 !important; background:#fff !important; box-shadow:0 1px 2px rgba(0,0,0,.2) !important; border-radius:10px !important; }
body.modo-general #app-shell .gen-campo:hover, body.modo-general #app-shell .gen-periodo-btn:hover { background:#f7f8f9 !important; }
body.modo-general #app-shell .gen-campo:focus-within { box-shadow:0 0 0 2px var(--sp-marino), 0 0 0 4px var(--sp-naranja-claro) !important; }
/* Si hay filtros activos, sus etiquetas van en la banda también. */
body.modo-general #app-shell .gen-activos #gen-limpiar, body.modo-general #app-shell #gen-cuerpo > .gen-nota { color:#e3e6ea !important; }
body.modo-general #app-shell .gen-activos .cs-chip { background:#fff !important; color:var(--gx-tinta) !important; border:0 !important; }

/* Tarjetas: blancas, sin borde, radio 18. La de «Venta del periodo», montada en la banda, lleva una sombra más
   honda para que se lea apoyada sobre ella. */
body.modo-general #app-shell .section, body.modo-general #app-shell .in-tablero .section.in-tarjeta, body.modo-general #app-shell .mp-resumen > .section.in-tarjeta {
  border-radius:18px !important; border:0 !important; box-shadow:var(--sp-sombra) !important; background:#fff !important;
}
body.modo-general #app-shell .in-tablero .section.in-tarjeta:hover { border:0 !important; box-shadow:var(--sp-sombra) !important; }
body.modo-general #app-shell .mp-resumen > .section.in-tarjeta, body.modo-general #app-shell .mp-resumen > .section.in-tarjeta:hover { box-shadow:0 1px 2px rgba(22,25,31,.06), 0 18px 40px -22px rgba(13,18,28,.55) !important; }
body.modo-general #app-shell .mp-resumen .in-cifra, body.modo-general #app-shell .mp-resumen .in-cifra:first-child { border-left-color:var(--gx-linea) !important; }
body.modo-general #app-shell .mp-resumen .in-cifra:first-child { border-left:0 !important; }
body.modo-general #app-shell .in-titular.bien { border:0 !important; box-shadow:none !important; background:none !important; border-radius:0 !important; }

/* Tinta: títulos y cifras en el casi negro de AWS. */
body.modo-general #app-shell .section h2, body.modo-general #app-shell .section h3, body.modo-general #app-shell .in-cab h2 { color:var(--gx-tinta) !important; }
body.modo-general #app-shell .in-cifra strong, body.modo-general #app-shell .in-cifra b { color:var(--gx-tinta) !important; letter-spacing:-.02em !important; }

/* Dentro de las tarjetas: segmentados en riel gris con la opción elegida en blanco; buscador y «Ordenar» en gris. */
body.modo-general #app-shell .seg-filtros { background:var(--sp-riel) !important; border:0 !important; }
body.modo-general #app-shell .seg-filtros .chip { color:var(--gx-texto) !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(22,25,31,.12) !important; }
body.modo-general #app-shell .bf-buscar { background:var(--sp-gris) !important; border:0 !important; }
body.modo-general #app-shell .bf-buscar:focus-within { background:#fff !important; box-shadow:var(--sp-foco) !important; }
body.modo-general #app-shell .sp-orden-btn, body.modo-general #app-shell .sp-cat-pags button { border:0 !important; background:var(--sp-gris) !important; }
body.modo-general #app-shell .sp-orden-btn:hover, body.modo-general #app-shell .sp-cat-pags button:hover:not([disabled]) { background:var(--sp-riel) !important; }

/* Mosaicos y notas dentro de las tarjetas: gris perla, sin línea. */
body.modo-general #app-shell .section button.tarjeta-cifras { background:var(--sp-gris) !important; border:0 !important; border-radius:14px !important; }
body.modo-general #app-shell .gen-tipo-barra { background:var(--sp-riel) !important; }
body.modo-general #app-shell #gen-tend-resumen, body.modo-general #app-shell .gen-mix-resumen { background:var(--sp-gris) !important; border:0 !important; }

/* Listas y tablas: divisores finos y hover en gris perla. */
body.modo-general #app-shell .gen-top2 li, body.modo-general #app-shell .gen-cat-tabla td, body.modo-general #app-shell .gen-cat-tabla th { border-color:var(--gx-linea) !important; }
body.modo-general #app-shell .gen-top2 li > button:hover, body.modo-general #app-shell .gen-cat-tabla tr.gen-fila:hover td, body.modo-general #app-shell .gen-filas li > button:first-child:hover, body.modo-general #app-shell .gen-canal:hover { background:var(--sp-gris) !important; }
body.modo-general #app-shell .sp-th.activo { color:var(--sp-naranja-texto) !important; }
body.modo-general #app-shell .gen-mas, body.modo-general #app-shell details > summary { color:var(--gx-texto) !important; }

/* Menús y ventanas emergentes: blancos, una sola sombra; marcas de selección en naranja oscuro. */
body.modo-general #app-shell .sp-orden-menu, body.modo-general #app-shell .sp-campo-menu, body.modo-general .gen-modal-fondo.sp-pop .gen-modal { box-shadow:var(--sp-sombra-alta) !important; border:1px solid var(--gx-linea) !important; border-radius:14px !important; }
body.modo-general .gen-modal, body.modo-general .gen-det-ventana, body.modo-general dialog.gen-desglose { box-shadow:var(--sp-sombra-alta) !important; border-radius:18px !important; }
body.modo-general .gen-modal-fondo:not(.sp-pop), body.modo-general .gen-det-capa { background:rgba(22,30,45,.40) !important; }
body.modo-general #app-shell .sp-orden-menu button[aria-selected="true"] b, body.modo-general #app-shell .sp-campo-menu button[aria-selected="true"] b { color:var(--gx-tinta) !important; }
body.modo-general #app-shell .sp-orden-menu button i, body.modo-general #app-shell .sp-campo-menu button > i { color:var(--sp-naranja-texto) !important; }

/* Foco con teclado en todo lo que se toca del tablero. */
body.modo-general #app-shell :is(button, a, [tabindex="0"], .sp-th):focus-visible { outline:0 !important; box-shadow:var(--sp-foco) !important; border-radius:8px; }
body.modo-general .gen-det-ventana :is(button, a):focus-visible, body.modo-general .gen-modal :is(button, a):focus-visible { outline:0 !important; box-shadow:var(--sp-foco) !important; }

/* «Venta del periodo» más baja: menos aire entre título, resumen y cifras (el contenido no cambia). */
body.modo-general #app-shell .mp-resumen > .section.in-tarjeta { padding-top:14px !important; }
body.modo-general #app-shell .mp-resumen > .section > .in-cab { margin-bottom:6px !important; padding-bottom:0 !important; }
body.modo-general #app-shell .mp-resumen .in-titular.bien { margin:0 22px 4px !important; }
body.modo-general #app-shell .mp-resumen .in-cifra, body.modo-general #app-shell .mp-resumen .in-cifra:first-child { padding-top:8px !important; padding-bottom:12px !important; }
body.modo-general #app-shell .mp-resumen .in-cifra > span:not(.in-sub) { margin-bottom:2px !important; }
body.modo-general #app-shell .mp-resumen .in-cifra .in-sub { margin-top:4px !important; }

/* Barras partidas por canal: 2 px de separación blanca entre segmentos, para que cada canal se lea sin depender
   sólo del color. */
body.modo-general #app-shell :is(.gen-barra-canales, .gen-canales-mini) > i + i { box-shadow:inset 2px 0 0 #fff; }

/* General de una empresa: debajo del nombre de la tienda, su razón social en gris claro. */
body.modo-general #app-shell .gen-fresco .sp-razon { font-style:normal; font-size:13px; font-weight:500; color:#d5dae2; }