/* Mejoras de UX de los portales de grupodess.com y admin.floresya.mx aprobadas por Alex por Telegram
   (hermes/ux_mejora_loop.py). La sirve ux-wrap.php; cada bloque lleva su id. */

/* ux-mejora 8cd6f48c 2026-09-30: En el celular agrandamos un poco los textos más pequeños (insignias, reloj, etiquetas y metas) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  #mode-badge,
  #nav-clock,
  #tower-grid > div > div,
  #sb-target,
  #sb-label,
  #sandbox-section > div.sandbox-records > div.record-card > div.record-label {
    font-size: 12px;
  }
}

/* ux-mejora 51da1a15 2026-09-30: En el celular agrandamos un poco los textos más chicos de los tableros (los récords de WR/P&L y las etiquetas y subtítulos de las tarjetas) para que se lean sin */
@media (max-width: 480px) {
  #sb-wr,
  #lv-wr,
  .record-wr,
  div.page > div.stats-grid > div.stat-card > div.stat-label,
  div.page > div.stats-grid > div.stat-card > div.stat-sub,
  #s-bal-sub,
  #s-dep-sub {
    font-size: 12px;
  }
}

/* ux-mejora b418688d 2026-09-30: En el celular agrandamos un poco los textos más pequeños de las tarjetas de posiciones (títulos de sección, insignias SB/NO, precio de entrada y fecha de cierre */
@media (max-width: 480px) {
  div.page > div.main-grid > div > div.section-title,
  div.pos-badges > span.badge,
  #pos-cards > div.pos-card > div.pos-card-bottom > span.pos-entry,
  div.pos-card > div.pos-card-bottom > span.pos-closes > span {
    font-size: 12px;
  }
}

/* ux-mejora 2dca3751 2026-09-30: En el celular agrandamos un poquito los textos más pequeños del tablero (el aviso «LIVE» y los nombres de los indicadores: pedidos, entregados, en proceso y rev */
@media (max-width: 480px) {
  .live-badge > span.live-text,
  #kpi-pedidos-label,
  div.kpi-strip > div.kpi > div.label,
  #kpi-proceso-label,
  #kpi-revenue-label {
    font-size: 12px;
  }
  #kpi-proceso-label > span {
    font-size: 12px !important;
  }
}

/* ux-mejora 1461e83c 2026-10-01: En el celular agrandamos un poco los textos más pequeños de las tarjetas de posiciones, las estadísticas y los paneles de ballenas e inteligencia, para que se l */
@media (max-width: 480px) {
  #pos-cards > div.pos-card.sandbox > div.pos-card-bottom > span.pos-pct,
  #pos-cards div.history-grid > div.mini-stats > div.mini-stat > span.mini-stat-label,
  #intel-sm > div.whale-item > div.whale-content > div.whale-meta,
  #intel-sm > div.whale-item > div,
  #intel-sm > div.whale-item > div.whale-content > div.whale-action,
  #tower-grid > div > div,
  #intel-lessons > div.lesson-item,
  div.main-grid > div.intel-col > div.intel-card > div.intel-title {
    font-size: 12px;
  }
}

/* ux-mejora 128a2580 2026-10-01: En el celular agrandamos un poco los textos más chicos de la página de resultados (las etiquetas de cada descubrimiento, las fechas y horas, los porcentajes y t */
@media (max-width: 480px) {
  div.dev-body > div.outcome > div.out-head > a.out-loop.out-loop-link,
  div.dev-body > div.outcome > div.out-head > span.out-time.mono,
  section > div.rank-block > div.loop-row > span.loop-pct.mono,
  section > div.rank-block > div.loop-row > span.loop-n.mono,
  div.dev-body > div.diag > div.diag-head > span.diag-kind,
  details.dev-details > div.dev-body > div.diag > div.diag-loop.mono,
  div.bsc-kpis > div.bsc-kpi > span.bsc-v > span.bsc-meta,
  div.bsc-card > div.bsc-head > div > div.bsc-owner {
    font-size: 12px;
  }
}

/* ux-mejora 2251f980 2026-10-01: En el celular agrandamos un poco los textos más pequeños de las tarjetas de esta página (etiquetas, estados, metas y avisos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  div.grid > div.card.span2 > div.api-row > div.api-usage,
  div.grid > div.card.span2 > div,
  div.card.span2 > div.tier-row > div.tier-meta > span,
  div.grid > div.card > div.card-title,
  div.grid > div.card.span2 > div.card-title,
  div.bot-card.online > div.bot-header > div > div.bot-status,
  div.card.span2 > div.bots-grid > div.bot-card.online > div.bot-meta,
  div.grid > div.card > div.cron-badges > span.cron-badge {
    font-size: 12px;
  }
}

/* ux-mejora 76c11c25 2026-10-01: Aclaramos los textos pequeños que casi no se distinguían del fondo (avisos, etiquetas y récords) para que se lean bien en la computadora. */
#pos-cards .pos-card .pos-badges .badge.badge-no,
#nav-tickers .ticker .ticker-name,
#sandbox-section .sandbox-records .record-card .record-label,
#sandbox-section .sandbox-records .record-card .record-wr,
#edge-cards .empty-state > span {
  color: #b9c2cc;
}
#pos-cards .pos-card .pos-badges .badge.badge-no {
  color: #ff8a80;
}

/* ux-mejora d81f36f2 2026-10-02: Aumenta el tamaño de los textos pequeños en dispositivos móviles para mejorar la legibilidad. */
.lf-stage > div.lf-item > div.lf-meta > span,
#list > div.tile.on > div.t-foot > span.st,
#list > div.tile.on > div.t-foot > span.t-age,
#live-feed > div.lf-header > span.lf-live {
  font-size: 12px;
}
@media (max-width: 480px) {
  .lf-stage > div.lf-item > div.lf-meta > span,
  #list > div.tile.on > div.t-foot > span.st,
  #list > div.tile.on > div.t-foot > span.t-age,
  #live-feed > div.lf-header > span.lf-live {
    font-size: 12px;
  }
}

/* ux-mejora a454b133 2026-10-02: Aclaramos los textos pequeños que casi no se distinguían del fondo en el tablero del celular, para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#map) table > thead > tr > th,
  body:has(#map) table.geo-table > thead > tr > th,
  body:has(#map) div.kpi-strip > div.kpi > div.label,
  body:has(#map) #period-buttons > button.period-btn,
  body:has(#map) div.geo-panel > div.geo-kpis > div.geo-kpi > span.geo-kpi-label,
  body:has(#map) div.geo-panel > div.geo-grid > div.geo-card > h3,
  body:has(#map) div.geo-grid-2 > div.geo-card > div.geo-card-head > h3,
  body:has(#map) div.geo-grid-2 > div.geo-card > div.geo-card-head > span.geo-tag,
  body:has(#map) #geo-billing-bars > div.geo-bar-row > div.geo-bar-top > span.pct,
  body:has(#map) #geo-ip-bars > div.geo-bar-row > div.geo-bar-top > span.pct,
  body:has(#map) #geo-cities-list > li.floresya-dashboard-empty,
  body:has(#map) div.geo-panel > div.geo-panel-head > p.geo-sub,
  body:has(#map) div.geo-panel > h3,
  body:has(#map) footer.footer > div.footer-sources > span.footer-source,
  body:has(#map) #kpi-cap-detail,
  body:has(#map) #board-body > tr > td,
  body:has(#map) div.bottom > div.velocity > div.subtitle,
  body:has(#ticker-track) #ticker-track > div.ticker-item > span.ticker-badge {
    color: #b9c2cc !important;
  }
  body:has(#map) #period-buttons > button.period-btn.active {
    color: #1a1a22 !important;
  }
}

/* ux-mejora c764f8d9 2026-10-03: En el celular agrandamos un poquito los textos más pequeños de las tablas y de los paneles del tablero (encabezados, celdas, etiquetas y títulos de tarjetas) pa */
@media (max-width: 480px) {
  body:has(#map) table > thead > tr > th,
  body:has(#map) table.geo-table > thead > tr > th,
  body:has(#map) table > tbody > tr > td,
  body:has(#map) table > tbody > tr > td.num,
  body:has(#map) tbody > tr > td > span.health-pill,
  body:has(#map) div.geo-panel > div > div > div,
  body:has(#map) div.geo-panel > div.geo-kpis > div.geo-kpi > span.geo-kpi-label,
  body:has(#map) div.geo-panel > div.geo-grid > div.geo-card > h3 {
    font-size: 12px !important;
  }
}

/* ux-mejora cec21741 2026-10-03: Aclaramos los textos grises que casi no se veían sobre el fondo oscuro del tablero (encabezados de tablas, etiquetas y títulos), para que se lean sin esfuerzo. */
/* ux-mejora: aclaramos los textos grises de bajo contraste sobre el fondo oscuro del tablero. */
body:has(#map) table > thead > tr > th,
body:has(#map) table.geo-table > thead > tr > th,
body:has(#map) div.kpi-strip > div.kpi > div.label,
body:has(#map) #period-buttons > button.period-btn,
body:has(#map) div.geo-panel > div.geo-kpis > div.geo-kpi > span.geo-kpi-label,
body:has(#map) div.geo-panel > div.geo-grid > div.geo-card > h3,
body:has(#map) #geo-billing-bars > div.geo-bar-row > div.geo-bar-top > span.pct,
body:has(#ticker-track) #ticker-track > div.ticker-item > span.ticker-badge {
  color: #b9c2cc !important;
}

/* ux-mejora 49bf0ab0 2026-10-03: En el celular agrandamos un poquito los textos más pequeños del tablero (etiquetas, avisos y datos de las tarjetas) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#intel-sm) #intel-sm > div.whale-item > div,
  body:has(#intel-sm) #intel-sm > div.whale-item > div.whale-content > div.whale-action,
  body:has(#intel-sm) #intel-sm > div.whale-item > div.whale-content > div.whale-name,
  body:has(#intel-council) #intel-council > div.council-item > span.council-action,
  body:has(#intel-council) #intel-council > div.council-item > span.council-q,
  body:has(#intel-council) #intel-council > div.council-item > div.council-ts,
  body:has(#tower-grid) #tower-grid > div > div,
  body:has(#tower-grid) div.history-grid > div.mini-stats > div.mini-stat > span.mini-stat-label {
    font-size: 12px !important;
  }
}

/* ux-mejora 20ff7073 2026-10-03: Aclaramos los textos verdes y grises que casi no se veían sobre el fondo claro y oscuro de esta página, para que se lean sin esfuerzo. */
/* ux-mejora: subimos el contraste de los textos verdes y grises que no se distinguían del fondo. */
body:has(.outcome) a.out-loop.out-loop-link,
body:has(.outcome) span.loop-pct.mono,
body:has(.outcome) div.stat-value,
body:has(.outcome) p.sub > a {
  color: #0a7d6b !important;
}
body:has(.outcome) span.diag-kind {
  color: #b91c1c !important;
}
body:has(.outcome) nav.bottom-nav > a.bn-item > span,
body:has(.outcome) div.pulso-topbar > div.pulso-brand > span.pulso-portal,
body:has(.outcome) div.pulso-topbar > div.sub {
  color: #cbd5e1 !important;
}

/* ux-mejora e97a18b9 2026-10-06: Aumenta el tamaño de los textos pequeños en dispositivos móviles para mejorar la legibilidad. */
.geo-bar-top span, .ticker-badge, footer.footer span.footer-source, .outcome a.out-loop.out-loop-link, .outcome span.loop-pct.mono, .outcome div.stat-value, .outcome p.sub > a, .outcome span.diag-kind, .outcome nav.bottom-nav a.bn-item span, .outcome div.pulso-topbar span.pulso-portal, .outcome div.pulso-topbar span.sub {
  font-size: 12px !important;
}
@media (max-width: 480px) {
  .geo-bar-top span, .ticker-badge, footer.footer span.footer-source, .outcome a.out-loop.out-loop-link, .outcome span.loop-pct.mono, .outcome div.stat-value, .outcome p.sub > a, .outcome span.diag-kind, .outcome nav.bottom-nav a.bn-item span, .outcome div.pulso-topbar span.pulso-portal, .outcome div.pulso-topbar span.sub {
    font-size: 12px !important;
  }
}

/* ux-mejora a851dd5d 2026-10-06: En el celular agrandamos un poquito los textos más pequeños de las tarjetas del tablero (etiquetas, títulos y datos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(.card) div.grid > div.card.span2 > div,
  body:has(.card) div.card.span2 > div.apis-summary > div.api-stat > div.api-stat-label,
  body:has(.card) div.card.span2 > div.llm-summary > div.llm-stat > div.llm-stat-label,
  body:has(.card) div.card.span2 > div > div > div,
  body:has(.card) div.grid > div.card > div,
  body:has(.card) div.grid > div.card.span2 > div.tier-row > div.tier-bar-label,
  body:has(.card) div.bot-card.offline > div.bot-header > div > div.bot-status,
  body:has(.card) div.card.span2 > div.bots-grid > div.bot-card.offline > div.bot-meta {
    font-size: 12px !important;
  }
}

/* ux-mejora f6aa2dd2 2026-10-07: Aclaramos los textos grises que casi no se distinguían del fondo oscuro del tablero, para que se lean sin esfuerzo. */
/* ux-mejora: aclaramos los textos grises de bajo contraste sobre el fondo oscuro del tablero. */
@media (max-width: 480px) {
  body:has(.card) div.rows > div.row > div.row-vals > div.meta,
  body:has(.card) div.rows > div.row.nodata > div.row-vals > div.actual,
  body:has(.card) section.card > header.card-h > div.dueno,
  body:has(.card) div.pulso-topbar > div.pulso-brand > span.pulso-portal,
  body:has(.card) div.pulso-topbar > div.pulso-sub,
  body:has(.card) footer {
    color: #8b92a3 !important;
  }
}

/* ux-mejora 4aa7a47b 2026-10-07: En el celular agrandamos un poquito los textos más pequeños del tablero (etiquetas, avisos y datos de las tarjetas) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(.card) div.rows > div.row > div.row-vals > div.meta,
  body:has(.card) div.rows > div.row > div.row-main > div.nota,
  body:has(.card) section.card > header.card-h > div.dueno,
  body:has(.card) div.pulso-topbar > div.pulso-sub,
  body:has(.card) footer {
    font-size: 12px !important;
  }
}

/* ux-mejora 67080b08 2026-10-07: Aclaramos los textos grises del tablero que casi no se distinguían del fondo oscuro, para que se lean sin esfuerzo. */
/* ux-mejora: aclaramos los textos grises de bajo contraste sobre el fondo oscuro del tablero. */
body:has(.card) div.rows > div.row > div.row-vals > div.meta,
body:has(.card) div.rows > div.row.nodata > div.row-vals > div.actual,
body:has(.card) section.card > header.card-h > div.dueno,
body:has(.card) div.pulso-topbar > div.pulso-brand > span.pulso-portal,
body:has(.card) div.pulso-topbar > div.pulso-sub,
body:has(.card) footer {
  color: #8b92a3 !important;
}

/* ux-mejora 8ec37ab4 2026-10-07: Oscurecemos los textos verdes y ámbar que casi no se distinguían del fondo claro, para que se lean sin esfuerzo. */
/* ux-mejora: subimos el contraste de los textos verdes y ámbar que no se distinguían del fondo claro. */
@media (max-width: 480px) {
  body:has(.outcome) a.out-loop.out-loop-link {
    color: #076b5b !important;
  }
  body:has(.outcome) div.bsc-kpis > div.bsc-kpi > span.bsc-v > b {
    color: #b45309 !important;
  }
  body:has(.outcome) div.trend-grid > div.trend-card > div.trend-head > span.trend-delta.up {
    color: #047857 !important;
  }
}

/* ux-mejora 362c84fe 2026-10-07: Aclaramos los textos grises que casi no se distinguían del fondo oscuro del tablero, para que se lean sin esfuerzo. */
/* ux-mejora: aclaramos los textos grises de bajo contraste sobre el fondo oscuro del tablero. */
body:has(#map) #geo-ip-bars > div.geo-bar-row > div.geo-bar-top > span.pct,
body:has(#map) footer.footer > div.footer-sources > span.footer-source,
body:has(#map) div.geo-grid-2 > div.geo-card > div.geo-card-head > h3,
body:has(#map) #kpi-cap-detail,
body:has(#map) #board-body > tr.board-row > td.order-time,
body:has(#map) div.bottom > div.velocity > div.subtitle {
  color: #9aa0b4 !important;
}

body:has(#map) #period-buttons > button.period-btn.active {
  color: #1a1a22 !important;
}

body:has(#map) div.leaflet-control-container > div.leaflet-bottom.leaflet-right > div.leaflet-control-attribution.leaflet-control > a {
  color: #0b4f6c !important;
}

/* ux-mejora 266ba4db 2026-10-07: Oscurecemos los textos verdes y ámbar que casi no se distinguían del fondo claro, para que se lean sin esfuerzo. */
/* ux-mejora: subimos el contraste de los textos verdes y ámbar que no se distinguían del fondo claro. */
body:has(.outcome) div.dev-body > div.outcome > div.out-head > a.out-loop.out-loop-link {
  color: #076b5b !important;
}
body:has(.outcome) div.trend-grid > div.trend-card > div.trend-head > span.trend-delta.up {
  color: #047857 !important;
}

/* ux-mejora 0ab2196e 2026-10-07: En el celular agrandamos un poquito los textos más pequeños del tablero (etiquetas, avisos y datos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#live-feed) div.shell > footer.portal-footer > a,
  body:has(#live-feed) #list > div.section-label,
  body:has(#live-feed) div.sheet-body > div.sheet-meta > div.cell > div.k,
  body:has(#live-feed) #lf-counter,
  body:has(#live-feed) #live-feed > div.lf-footer > span.lf-hint,
  body:has(#live-feed) #kpi > button.kpi-card > span.lbl {
    font-size: 12px !important;
  }
}

/* ux-mejora 7cda9b66 2026-10-07: En el celular agrandamos un poquito los textos más pequeños del tablero (avisos, etiquetas y datos) para que se lean sin esfuerzo. */
@media (max-width: 480px) {
  body:has(#ticker-track) #ticker-track > div.ticker-item > span.ticker-text,
  body:has(#ticker-track) div.geo-grid-2 > div.geo-card > div.geo-card-head > h3,
  body:has(#ticker-track) #kpi-cap-detail,
  body:has(#ticker-track) div.bottom > div.board > h3,
  body:has(#ticker-track) #board-body > tr.board-row > td > span.status-badge,
  body:has(#ticker-track) div.bottom > div.velocity > h3,
  body:has(#ticker-track) div.bottom > div.velocity > div.subtitle,
  body:has(#ticker-track) div.geo-panel > div.geo-panel-head > div > p.geo-sub {
    font-size: 12px !important;
  }
}