/* Todas las páginas de cada plataforma (ux-designer + Taste + impeccable, 2026-11-01). Reglas de sistema, no de una
   página: las mismas piezas se ven igual en Ventas, Inventario, Casos, Costos, Pricing, Full… Sin cambiar contenido.
   Para gente grande: nada de letra de 10–11 px en versalitas; lo mínimo es 13 px y lo que se lee, 14–15 px. */

/* —— Etiquetas de campos, encabezados de grupo y textos de ayuda: sin versalitas, legibles —— */
html body:not(.modo-general) #app-shell #content :is(.uf-campo label, .ct-campo > span, .ec-cuerpo h4, .fc-campo > span, .bf-campo > span) {
  font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--sp-tenue, #5f6b7a) !important;
}
html body:not(.modo-general) #app-shell #content :is(.tv-ayuda, .vc-nota, .caso-meta, .fc-total, .in-sub) { font-size:13px !important; }
html body:not(.modo-general) #app-shell #content :is(.tv-cuenta) { font-size:14px !important; }

/* —— Tablas (Tabulator y tablas simples): encabezado claro, filas de 14 px, números alineados —— */
html body:not(.modo-general) #app-shell #content .tabulator { border:0 !important; border-radius:14px !important; overflow:hidden; font-size:14px; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-header { border-bottom:1px solid var(--sp-linea, #e9ebed) !important; background:#f7f8fa !important; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-header .tabulator-col { background:transparent !important; border-right:0 !important; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-col-title { font-size:13px !important; font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--sp-tenue, #5f6b7a) !important; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-row { border-bottom:1px solid var(--sp-linea, #e9ebed) !important; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-row .tabulator-cell { font-size:14px; padding-top:10px; padding-bottom:10px; border-right:0 !important; font-variant-numeric:tabular-nums; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-row:hover { background:#f7f8fa !important; }
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-placeholder span { font-size:15px !important; font-weight:500 !important; color:var(--sp-tenue, #5f6b7a) !important; }
html body:not(.modo-general) #app-shell #content table td { font-size:14px; font-variant-numeric:tabular-nums; }
html body:not(.modo-general) #app-shell #content table th { font-size:13px !important; }

/* —— Página sin datos todavía: un aviso tranquilo y legible, no letra chica —— */
html body:not(.modo-general) #app-shell #content .empty { display:flex; align-items:flex-start; gap:14px; padding:22px 4px 8px; }
html body:not(.modo-general) #app-shell #content .empty > span { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:10px; background:#f1f3f6; color:var(--sp-tenue, #5f6b7a); font-size:16px; }
html body:not(.modo-general) #app-shell #content .empty b { display:block; font-size:16px !important; font-weight:600; color:var(--sp-tinta, #16191f); }
html body:not(.modo-general) #app-shell #content .empty p { margin:4px 0 0; font-size:14px !important; line-height:1.5; color:var(--sp-texto, #414d5c); max-width:72ch; }
html body:not(.modo-general) #app-shell #content .empty code { font-size:13px; padding:1px 6px; border-radius:6px; background:#f1f3f6; color:var(--sp-texto, #414d5c); }

/* —— Error al cargar: aviso con su color y su ícono, no texto rojo suelto —— */
html body:not(.modo-general) #app-shell #content .section > .error:only-child { display:flex; gap:10px; align-items:flex-start; margin:0; padding:14px 16px; border:1px solid #fecdca; border-radius:12px; background:#fef3f2; color:#b42318; font-size:15px; }
html body:not(.modo-general) #app-shell #content .section > .error:only-child::before { content:"\F33A"; font-family:"bootstrap-icons"; font-size:17px; line-height:1.3; }

/* —— Páginas «en construcción»: mismos títulos de grupo que el resto, sin versalitas —— */
html body:not(.modo-general) #app-shell #content .ec-cuerpo li { font-size:15px; line-height:1.55; color:var(--sp-texto, #414d5c); }

/* —— Notas «Cómo se calcula» y avisos de la página: un poco más de aire y letra de lectura —— */
html body:not(.modo-general) #app-shell #content > :is(.nota, .in-nota, .fc-nota, .aviso-local, .callout) { font-size:14px; line-height:1.5; }

/* —— Título de la ruta: la sección y su subsección (p. ej. «Devoluciones / Casos») del mismo tamaño —— */
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line #page-breadcrumb * { font-size:inherit !important; font-weight:inherit !important; color:inherit !important; }

/* Segmentados que quedan sobre el fondo gris (fuera de una tarjeta): el riel gris se perdía contra el suelo. */
html body:not(.modo-general) #app-shell #content .seg-filtros:not(:is(.section, .in-tarjeta, .card, .modal) .seg-filtros) { background:#dde1e7 !important; }
/* Tabla vacía: mensaje del mismo tamaño que el resto de los avisos, no un titular gris. */
html body:not(.modo-general) #app-shell #content .tabulator .tabulator-placeholder :is(span, div, *) { font-size:15px !important; font-weight:500 !important; color:var(--sp-tenue, #5f6b7a) !important; }
/* Ruta de tres niveles («Devoluciones / Casos»): todos los niveles del mismo tamaño. */
html body:not(.modo-general) #app-shell .sp-cab > .breadcrumb-line > :not(#breadcrumb-tienda) { font-size:17px !important; font-weight:500 !important; }
/* Campos y listas de opciones dentro de la página: mismo alto y letra en todas (antes había selects de 28 px). */
html body:not(.modo-general) #app-shell #content :is(select, input[type="text"], input[type="search"], input[type="date"], input[type="number"]):not(.tabulator *) { min-height:38px; font-size:14px !important; }

/* Barra de filtros del tipo General en páginas de plataforma (p. ej. ERP · Inventario): va sobre la banda, como en el
   General: sin saludo (es sólo del General), etiquetas claras y campos de vidrio con texto blanco. */
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros { display:flex !important; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px !important; margin:0 0 18px !important; padding:0 !important; }
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros > .gen-fresco { display:none !important; }
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros > .gen-campo { flex-direction:row !important; align-items:center; gap:8px !important; height:40px; margin:0 !important; padding:0 4px 0 12px !important; border-radius:10px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.38); }
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros > .gen-campo > span { font:500 14.5px var(--sp-letra, Inter, sans-serif) !important; letter-spacing:0 !important; text-transform:none !important; color:#e6eaf0 !important; margin:0 !important; white-space:nowrap; }
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros > .gen-campo select { height:38px !important; min-height:0; border:0 !important; background-color:transparent !important; color:#fff !important; font:600 15px var(--sp-letra, Inter, sans-serif) !important; box-shadow:none !important; padding-right:28px !important; }
html body:not(.modo-general) #app-shell #content > .gen-barra-filtros > .gen-campo select option { color:#16191f; }

/* Barras de reparto (Por ERP, Por CEDIS, Por categoría…): una sola tinta carbón para todas; la que está elegida, en
   naranja (el mismo sistema de color de las gráficas del General). Antes había café, beige, dorado, azul y naranja
   mezclados, y el naranja ya no decía «elegido». */
html body:not(.modo-general) #app-shell #content .gen-barra > i { background:#3f3f46 !important; }
html body:not(.modo-general) #app-shell #content [aria-pressed="true"] .gen-barra > i { background:#e0661a !important; }
html body:not(.modo-general) #app-shell #content .gen-barra { background:#eef0f3 !important; border-radius:4px !important; }
/* Listas de conceptos (fc-conceptos: p. ej. ERP · Por categoría): misma tinta carbón; la primera ya no va en naranja. */
html body:not(.modo-general) #app-shell #content .fc-conceptos li > i { background:#3f3f46 !important; height:6px; border-radius:3px; }

/* Auditoría de legibilidad de todas las plataformas (2026-11-01): lo que quedaba en 11–12.5 px o con poco contraste. */
/* Botones segmentados (7/30/90 días, Hoy/Ayer/Mes, Todos/Pendientes…) y su conteo. */
html body:not(.modo-general) #app-shell #content .seg-filtros .chip { font-size:14px !important; }
html body:not(.modo-general) #app-shell #content .seg-filtros .chip i { font-size:13px !important; color:#5f6b7a !important; }
html body:not(.modo-general) #app-shell #content .seg-filtros .chip[aria-pressed="true"] i { color:#c2410c !important; }
/* Botones de acción (Exportar, Exportar a Excel, Ver los pagos…). */
html body:not(.modo-general) #app-shell #content .tv-boton { font-size:14px !important; }
/* Datos de apoyo en listas de reparto y conceptos (piezas, SKU, porcentaje). */
html body:not(.modo-general) #app-shell #content .gen-filas :is(em, .gen-sub-izq) { font-size:13px !important; color:#5f6b7a !important; }
html body:not(.modo-general) #app-shell #content .fc-conceptos em { font-size:13px !important; color:#5f6b7a !important; }
html body:not(.modo-general) #app-shell #content :is(.gen-cobertura, .cs-periodo, .fc-f-res) { font-size:13px !important; color:#5f6b7a !important; }
/* Etiquetas pequeñas («hoy», «En construcción»). */
html body:not(.modo-general) #app-shell #content :is(.fc-curso, .ec-etiqueta) { font-size:13px !important; }
/* Calendario de Ventas, Inicio (pestañas de la gráfica, «Ver ventas», «Ver cifras por día») y detalles de ERP. */
html body:not(.modo-general) #app-shell #content .vc-sem span { font-size:13px !important; color:#5f6b7a !important; }
html body:not(.modo-general) #app-shell #content .vc-rango span, html body:not(.modo-general) #app-shell #content .vc-campo > span { font-size:13px !important; }
html body:not(.modo-general) #app-shell #content .ct-vistas button { font-size:14px !important; }
html body:not(.modo-general) #app-shell #content .detail-button { font-size:14px !important; }
html body:not(.modo-general) #app-shell #content details > summary { font-size:14px !important; }
html body:not(.modo-general) #app-shell #content .cs-chip { font-size:13px !important; }
html body:not(.modo-general) #app-shell #content .fc-total { color:#5f6b7a !important; }
html body:not(.modo-general) #app-shell #content .in-semaforo.verde { color:#1f7a4d !important; }
html body:not(.modo-general) #app-shell #content .in-cifra > span, html body:not(.modo-general) #app-shell #content .in-nivel span { font-size:14px !important; }
html body:not(.modo-general) #app-shell #content .vc-nota { color:#5f6b7a !important; font-size:13px !important; }
html body:not(.modo-general) #app-shell #content .pq-link { color:#414d5c !important; }
html body:not(.modo-general) #app-shell :is(.pq-mini-estado, .pq-mini-chip) { font-size:13px !important; }
html body:not(.modo-general) #app-shell #content .tv-ayuda { color:#5f6b7a !important; }