/* Filtros de arriba: E-commerce y Tienda despliegan un menú propio bajo la caja; el periodo, un panel bajo su botón. */
body.modo-general #app-shell .sp-campo { position:relative; padding:0 !important; }
body.modo-general #app-shell .sp-campo-btn { display:flex; align-items:center; gap:8px; width:100%; height:38px; padding:0 12px; border:0; background:none; font:600 14px var(--gx-letra); color:var(--gx-tinta); cursor:pointer; text-align:left; }
body.modo-general #app-shell .sp-campo-btn > span { font:500 13px/1 var(--gx-letra) !important; color:var(--gx-tenue) !important; white-space:nowrap; }
body.modo-general #app-shell .sp-campo-btn b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
body.modo-general #app-shell .sp-campo-btn i { color:#7a8196; font-size:12px; transition:transform .15s; }
body.modo-general #app-shell .sp-campo-btn[aria-expanded="true"] i { transform:rotate(180deg); }
body.modo-general #app-shell .sp-campo-btn:focus-visible { outline:0; }

/* Pantallas angostas: el saludo y la hora de los datos se ven siempre (antes se ocultaban abajo de 1100 px) y los
   filtros bajan a su propia fila en lugar de cortarse por la izquierda. */
@media (max-width:1100px) {
  body.modo-general #app-shell .gen-barra-filtros { flex-wrap:wrap !important; justify-content:flex-start !important; }
  body.modo-general #app-shell .gen-fresco { display:flex !important; flex:1 1 100%; margin:0 0 6px !important; white-space:normal; }
}
@media (max-width:640px) {
  body.modo-general #app-shell .gen-fresco b { font-size:24px !important; }
  body.modo-general #app-shell .gen-barra-filtros > :not(.gen-fresco) { flex:1 1 100%; }
  body.modo-general #app-shell .gen-periodo-btn { width:100%; }
}

/* Filtro de periodo con el mismo patrón que E-commerce y Tienda: etiqueta gris, valor en tinta, rango corto en gris. */
body.modo-general #app-shell .gen-periodo-btn { gap:8px !important; font:600 14px var(--gx-letra) !important; color:var(--gx-tinta) !important; }
body.modo-general #app-shell .gen-periodo-btn .sp-et { font:500 13px/1 var(--gx-letra); color:var(--gx-tenue); }
body.modo-general #app-shell .gen-periodo-btn b { font-weight:600; }
body.modo-general #app-shell .gen-periodo-btn em { font-size:13px; font-weight:400; color:var(--gx-tenue) !important; font-variant-numeric:tabular-nums; }
body.modo-general #app-shell .gen-periodo-btn .bi-chevron-down { color:#7a8196; font-size:12px; margin-left:auto; padding-left:4px; }
@media (max-width:640px) { body.modo-general #app-shell .gen-periodo-btn em { display:inline !important; } }

/* Menús de Bootstrap de E-commerce y Tienda (sp-filtros.js). Colores, radio, sombra y letra vienen del tema
   (sp-bootstrap.css); aquí sólo lo propio: logos, la marca de elegido y las tiendas sangradas bajo su e-commerce. */
.sp-menu { min-width:290px; max-height:min(440px, 70vh); overflow:auto; }
.sp-menu .dropdown-item { display:flex; align-items:center; gap:10px; min-height:40px; }
.sp-menu .dropdown-item .sp-txt { flex:1; min-width:0; }
.sp-menu .dropdown-item.active { font-weight:600; }
.sp-menu .dropdown-item > i { color:var(--sp-naranja-texto); font-size:16px; }
.sp-menu .dropdown-item em { font-style:normal; font-size:13px; color:var(--sp-tenue); }
.sp-menu .dropdown-item.disabled img { filter:grayscale(1); opacity:.5; }
.sp-menu .dropdown-item.sp-sangria { padding-left:38px; }
.sp-menu img { width:22px; height:22px; border-radius:6px; object-fit:contain; flex:none; }
.sp-menu .sp-todos { width:22px; height:22px; border-radius:6px; border:1px dashed #c4c9d4; flex:none; }
.sp-menu .dropdown-header { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.sp-menu .dropdown-header img { width:16px; height:16px; border-radius:4px; }
@media (max-width:640px) { .sp-menu { min-width:0; width:calc(100vw - 32px); } }

/* Periodo: el contenido que arma el portal va dentro del menú de Bootstrap, sin ventana ni fondo oscuro. */
.sp-periodo-menu { --bs-dropdown-padding-x:0; --bs-dropdown-padding-y:0; width:420px; max-width:calc(100vw - 24px); max-height:min(640px, calc(100vh - 150px)); overflow:auto; }
html body .sp-periodo-menu > .gen-modal-fondo.sp-en-menu { position:static !important; inset:auto !important; z-index:auto !important; display:block !important; padding:0 !important; background:none !important; backdrop-filter:none !important; opacity:1 !important; }
html body .sp-periodo-menu > .gen-modal-fondo.sp-en-menu > .gen-modal { position:static !important; width:auto !important; max-width:none !important; max-height:none !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; opacity:1 !important; transform:none !important; animation:none !important; overflow:visible !important; }

/* Los menús viven dentro de la caja del filtro (un <label> con versalitas y estilos de campo del portal): no heredan nada de ella. */
:is(.gen-campo, .sp-orden) > .dropdown-menu { --bs-dropdown-bg:#fff; text-transform:none; letter-spacing:normal; font:400 15px/1.4 var(--sp-letra); color:var(--sp-tinta); text-align:left; white-space:normal; cursor:default; }
html body .sp-periodo-menu .gen-opcion input[type="radio"] { height:16px !important; min-height:0 !important; padding:0 !important; }
html body .sp-periodo-menu .gen-fechas input { height:38px !important; padding:0 10px !important; font:500 15px var(--sp-letra) !important; color:var(--sp-tinta) !important; }
html body .sp-periodo-menu .gen-modal-cab h2 { font-size:16px !important; }
html body .sp-periodo-menu .gen-modal h3 { font-size:13px !important; }
html body .sp-periodo-menu .gen-opcion b { font-size:15px !important; }
html body .sp-periodo-menu .gen-opcion em { font-size:13px !important; }
html body .sp-periodo-menu .gen-modal > .caso-meta { font-size:13px !important; }

/* «Ordenar»: cada opción con su explicación en una línea; el encabezado de Rentabilidad dice cuántos tienen costo. */
.sp-orden-lista { width:330px; }
.sp-orden-lista .dropdown-item .sp-txt { display:flex; flex-direction:column; gap:1px; }
.sp-orden-lista .dropdown-item b { font-weight:600; }
.sp-orden-lista .dropdown-item small { font-size:13px; color:var(--sp-tenue); }
.sp-orden-lista .dropdown-item.disabled { opacity:.5; }
.sp-orden-lista .dropdown-header { justify-content:space-between; color:var(--sp-tinta); }
.sp-orden-lista .dropdown-header em { font-style:normal; font-weight:500; color:var(--sp-tenue); }

/* Categorías: menú del Periodo con los atajos en un grupo de botones y las dos fechas en un renglón. */
.sp-fechas-menu { width:340px; padding:8px 12px 14px !important; }
.sp-fechas-menu .dropdown-header { padding:8px 0 6px; }
.sp-fechas-menu .sp-fechas-atajos .seg-filtros { display:flex; width:100%; margin:0; }
.sp-fechas-menu .sp-fechas-atajos .seg-filtros > .btn { flex:1; }
.sp-fechas-menu .sp-fechas-campos { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
html body.modo-general #app-shell .gen-barra-filtros .sp-fechas-menu .gen-campo { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:4px !important; height:auto !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; box-shadow:none !important; }
html body.modo-general #app-shell .gen-barra-filtros .sp-fechas-menu .gen-campo > span { font:500 13px var(--sp-letra) !important; color:var(--sp-tenue) !important; text-transform:none !important; letter-spacing:0 !important; }
html body.modo-general #app-shell .gen-barra-filtros .sp-fechas-menu .gen-campo input { height:40px !important; padding:0 10px !important; border:1px solid #d9dce4 !important; border-radius:10px !important; background:#fff !important; font:500 15px var(--sp-letra) !important; color:var(--sp-tinta) !important; box-shadow:none !important; }
html body.modo-general #app-shell .gen-barra-filtros .sp-fechas-menu .gen-campo input:focus { border-color:#c2410c !important; box-shadow:0 0 0 3px rgba(194,65,12,.15) !important; outline:0 !important; }