/* ============================================================
AdminCX — Responsive por módulo
styles/responsive.css
Va DESPUÉS de styles.css en index.html. Ese orden es el mecanismo:
ante igual especificidad gana la última hoja cargada, así que este
archivo corrige sin tener que subirle la especificidad a nada ni
llenar todo de !important.
Regla de oro de este archivo: SOLO agrega. No borra ni reescribe
ninguna regla de styles.css ni de index.html. Si algo se ve mal,
se comenta la línea del y la app vuelve exacta a como está
hoy — no hay que revertir veinte commits.
Breakpoints, los mismos que ya usa la app (no invento otros):
900px tablet / cajón lateral
768px teléfono apaisado
640px teléfono
480px teléfono chico (iPhone SE, Android de 360px)
Qué cubre:
§1 Fundamentos (nada se desborda a lo ancho)
§2 Tablas — corrige el doble scroll horizontal
§3 Barras de herramientas y buscadores
§4 Pestañas con scroll en vez de amontonadas
§5 Grids de 2 columnas fijas → 1 columna
§6 Grids automáticos con mínimo más ancho que el teléfono
§7 Calendarios de 7 columnas
§8 Modales a pantalla completa
§9 Lo que se dibuja con style="" dentro del JS
§10 Áreas táctiles
============================================================ */
/* ════════════════════════════════════════════════════════════
§1 FUNDAMENTOS
════════════════════════════════════════════════════════════ */
/* Una imagen o un SVG con ancho fijo mayor que la pantalla arrastra
toda la página hacia los lados. Es la causa #1 del scroll horizontal
fantasma, y aparece en las guías de Material de Apoyo, donde las
capturas se suben con el ancho que tenían al pegarlas. */
img, svg, video, canvas, iframe { max-width: 100%; }
/* `overflow-x:hidden` en body ya está en styles.css. Esto es el
complemento: impide que un hijo empuje el ancho antes de que el
recorte actúe. */
@media (max-width: 900px) {
html, body { max-width: 100%; }
.main, .page-content { min-width: 0; }
}
/* Un
, un bloque de código o un texto sin espacios (un ID de
conductor largo, una URL) no debe estirar la tarjeta que lo contiene. */
@media (max-width: 640px) {
pre, code, .ma-paso-desc {
overflow-wrap: anywhere;
word-break: break-word;
}
pre { overflow-x: auto; }
}
/* ════════════════════════════════════════════════════════════
§2 TABLAS — corrige el DOBLE SCROLL del pase anterior
════════════════════════════════════════════════════════════
En styles.css quedó esta regla del pase de armazón:
@media (max-width:768px){ table{display:block;overflow-x:auto} }
Sirve para las tablas sueltas, pero rompe las que YA viven dentro
de un contenedor que scrollea (.hx-table-wrap, .pp-tabla-wrap,
.gv-tabla-wrap2, .gv-table-wrap, .hor-table-wrap, .da-table-wrap,
.table-wrap — los siete ya tienen overflow-x:auto).
Dos problemas reales, no teóricos:
1. DOBLE SCROLLER. Quedan dos áreas de scroll horizontal, una
dentro de la otra. En un teléfono el dedo empuja la de adentro,
que no tiene a dónde moverse, y la tabla se siente trabada.
2. LA COLUMNA FIJA DEJA DE FUNCIONAR. En Horas de Conexión,
.hx-td-agente / .hx-th-agente son `position:sticky; left:0` para
que el nombre del agente no se pierda al deslizar los 7 días.
Sticky se ancla al contenedor con scroll más cercano. Al volverse
la tabla misma un contenedor con scroll, el ancla pasa a ser la
tabla — que mide 920px de ancho y nunca scrollea por dentro,
porque quien scrollea es el envoltorio. Resultado: la columna del
agente se va con el resto y en un teléfono no sabes de quién es
la fila que estás mirando.
La corrección: dentro de esos envoltorios la tabla vuelve a ser
tabla. El scroll lo hace el envoltorio, que es lo correcto. */
@media (max-width: 768px) {
.hx-table-wrap > table,
.pp-tabla-wrap > table,
.gv-tabla-wrap2 > table,
.gv-table-wrap > table,
.hor-table-wrap > table,
.da-table-wrap > table,
.table-wrap > table,
/* Gestión de Usuarios arma su envoltorio con style="overflow-x:auto"
en línea, sin clase. No se puede apuntar al div, pero sí a la tabla. */
table.ses-tabla {
display: table;
overflow: visible;
}
.hx-table-wrap, .pp-tabla-wrap, .gv-tabla-wrap2, .gv-table-wrap,
.hor-table-wrap, .da-table-wrap, .table-wrap {
-webkit-overflow-scrolling: touch;
}
/* Pista visual de que hay más a la derecha. Sin esto el usuario no
tiene forma de saber que la tabla sigue: en el teléfono no hay
barra de scroll visible hasta que ya la estás moviendo.
La técnica necesita pintar un degradado del COLOR DE FONDO del
envoltorio en cada borde para tapar la sombra cuando no hay nada
más que mostrar. Por eso va SOLO en los cuatro envoltorios que
declaran `background:var(--blanco)`. En .pp-tabla-wrap,
.da-table-wrap y .table-wrap el fondo es transparente: pintarles
blanco encima dejaría una costura visible, y en los módulos con
tema oscuro se vería peor todavía. Ahí no se pone y listo. */
.hx-table-wrap, .gv-tabla-wrap2, .gv-table-wrap, .hor-table-wrap {
background-image:
linear-gradient(to right, var(--blanco) 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), var(--blanco) 70%),
linear-gradient(to right, rgba(15,17,30,.10), rgba(15,17,30,0)),
linear-gradient(to left, rgba(15,17,30,.10), rgba(15,17,30,0));
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
}
/* La columna del agente en Horas de Conexión, reforzada: con la tabla
ya devuelta a `display:table` el sticky vuelve a anclarse al
envoltorio. El fondo tiene que ser opaco o las otras columnas se ven
por debajo al deslizar, y la sombra marca dónde termina la parte
congelada. */
@media (max-width: 768px) {
.hx-table th.hx-th-agente { z-index: 3; }
.hx-table td.hx-td-agente { z-index: 2; }
.hx-table .hx-th-agente,
.hx-table .hx-td-agente {
box-shadow: 2px 0 6px rgba(15, 17, 30, .10);
min-width: 150px;
}
/* 190px de nombre en una pantalla de 360 se come media tabla. */
.hx-th-agente { min-width: 150px; }
.hx-table { font-size: .74rem; }
.hx-table th, .hx-table td { padding: 8px 7px; }
}
/* La misma idea para las otras tablas anchas: apretar un poco la
celda gana dos columnas visibles sin tocar el HTML. */
@media (max-width: 640px) {
.gv-tabla2, .pp-tabla, .ses-tabla { font-size: .76rem; }
.gv-tabla2 th, .gv-tabla2 td,
.pp-tabla th, .pp-tabla td,
.ses-tabla th, .ses-tabla td { padding: 9px 10px; }
}
/* ════════════════════════════════════════════════════════════
§3 BARRAS DE HERRAMIENTAS Y BUSCADORES
════════════════════════════════════════════════════════════
El inventario dio ~40 barras `display:flex` SIN `flex-wrap`. En
escritorio no se nota; en un teléfono los hijos se comprimen hasta
ser ilegibles o se salen de la pantalla. Envolver es la corrección
de una línea. styles.css ya cubre 5 de ellas; acá van las demás. */
@media (max-width: 768px) {
.ma-toolbar, .ma-search-bar, .ma-card-header, .ma-cat-head,
.ma-viewer-header, #ma-admin-bar,
.hx-toolbar, .hx-search,
.pp-toolbar, .pp-gv-barra, .pp-gv-barra-btns, .pp-gv-bloque-head,
.pp-gv-bloque-acciones,
.gv-header, .gv-admin-toolbar, .gv-admin-toolbar2, .gv-ap-bloque-head,
.gv-total-bar, .gv-cal-nav, .gv-counter-controls,
.hor-header-row, .hor-search-wrap, .hor-modal-header,
.is-filters-bar, .is-issue-head,
.ci-card-head, .da-city-head, .da-controls,
.dsp-card-head, .dsp-city-head, .dsp-search-meta,
.des-barra, .cup-barra,
.cat-app-bar, .cp-race-barra, .ve-head, .upload-header,
.rc-example-bar, .vc-info-bar, .vr-info-bar, .gu-table-head {
flex-wrap: wrap;
}
/* Un buscador de ancho fijo al lado de dos botones deja 40px para
escribir. Que ocupe su propio renglón completo. */
.ma-search-box, .ci-search-box, .dsp-search-box, .da-search-box,
.pp-search-box, .hor-search-wrap, .hx-search, .des-buscador {
flex: 1 1 100%;
width: 100%;
min-width: 0;
}
}
/* Debajo de 480 los botones de acción van a ancho completo: apuntarle
a un botón de 90px con el pulgar, al lado de otros dos, es la causa
más común de tocar el que no era. */
@media (max-width: 480px) {
.ma-toolbar > button, .hx-toolbar > button,
.pp-toolbar > button, .gv-admin-toolbar > button,
.des-barra > button, .cup-barra > button {
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
}
/* ════════════════════════════════════════════════════════════
§4 PESTAÑAS
════════════════════════════════════════════════════════════
Las pestañas NO deben envolver: una fila de pestañas partida en dos
renglones deja de leerse como pestañas. Lo correcto es que se
deslicen, como en cualquier app de teléfono. */
@media (max-width: 768px) {
.gv-tabs, .pp-tabs, .pp-gv-subtabs, .cat-tabs, .hor-tabs-wrap,
.is-filter-tabs, .rc2-surge-tabs {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.gv-tabs::-webkit-scrollbar, .pp-tabs::-webkit-scrollbar,
.pp-gv-subtabs::-webkit-scrollbar, .cat-tabs::-webkit-scrollbar,
.hor-tabs-wrap::-webkit-scrollbar, .is-filter-tabs::-webkit-scrollbar,
.rc2-surge-tabs::-webkit-scrollbar {
display: none;
}
.gv-tabs > *, .pp-tabs > *, .pp-gv-subtabs > *, .cat-tabs > *,
.hor-tabs-wrap > *, .is-filter-tabs > *, .rc2-surge-tabs > * {
flex: 0 0 auto;
white-space: nowrap;
}
}
/* ════════════════════════════════════════════════════════════
§5 GRIDS DE 2 COLUMNAS FIJAS → 1 COLUMNA
════════════════════════════════════════════════════════════
`grid-template-columns:1fr 1fr` no se adapta: en 360px da dos
columnas de 170px. Un campo de formulario ahí no se puede usar. */
@media (max-width: 640px) {
.rc2-grid2,
.rc2-result-grid,
.ve-tiempo-grid,
.ve-nuevo-grid,
.pp-grid2,
.reporte-grid-2,
.gu-form-grid,
.is-grid-2,
.gv-form-row,
.hor-field-row,
.cp-reglas-grid,
.grid-requisitos {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════
§6 GRIDS AUTOMÁTICOS CON MÍNIMO MÁS ANCHO QUE EL TELÉFONO
════════════════════════════════════════════════════════════
`repeat(auto-fill, minmax(340px, 1fr))` se adapta solo… hasta que
la pantalla mide menos que ese mínimo. Ahí la columna se queda en
340px, no cabe, y desborda. Con el padding lateral de .page-content
(16px por lado) el ancho útil de un teléfono de 360px es 328px:
.ma-grid 340px ← desborda hasta en teléfonos de 375px
.des-cards 330px ← desborda
.cup-cards 300px ← justo al límite
#dsp-grid 290px
.kit-grid 280px
.gv-grid 280px
.hor-cards-grid 280px
Debajo de 480 no hay lugar para dos columnas en ningún caso, así
que todas van a una y se acabó el problema de raíz. */
@media (max-width: 480px) {
.ma-grid, .ma-cat-grid,
.des-cards, .cup-cards,
#dsp-grid, .dsp-grid,
.kit-grid,
.gv-grid, .gv-resumen-grid, .gv-totales-grid,
.hor-cards-grid,
.pp-grupo-grid, .pp-kpis,
.ve-vehiculos,
.home-modules-grid,
.vc-grid, .vr-grid, .rc-grid, .da-grid {
grid-template-columns: 1fr;
}
}
/* Entre 481 y 640 sí caben dos columnas, pero solo si el mínimo baja.
Así en una tablet chica o un teléfono apaisado no se desperdicia
media pantalla. */
@media (min-width: 481px) and (max-width: 640px) {
.ma-grid, .des-cards, .cup-cards, #dsp-grid, .dsp-grid,
.kit-grid, .gv-grid, .hor-cards-grid, .pp-grupo-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
}
/* ════════════════════════════════════════════════════════════
§7 CALENDARIOS DE 7 COLUMNAS
════════════════════════════════════════════════════════════
Un calendario no puede ir a 1 columna: dejaría de ser un calendario.
En 360px, 7 columnas dan ~46px por día — alcanza para el número si
se achica el relleno y el tipo de letra. Es la solución estándar
(la usa el calendario de iOS y el de Google).
.des-cal ya tiene su propio @media dentro de modules/desafios.js;
acá va el de Guardias Vacantes, que no lo tiene. */
@media (max-width: 640px) {
.gv-cal-grid, .gv-cal-dias-header {
gap: 3px;
}
.gv-cal-dias-header > * {
font-size: .58rem;
letter-spacing: 0;
padding: 4px 0;
}
.gv-cal-grid > * {
font-size: .68rem;
padding: 4px 2px;
min-height: 44px;
}
}
@media (max-width: 380px) {
.gv-cal-grid, .gv-cal-dias-header { gap: 2px; }
.gv-cal-grid > * { font-size: .62rem; padding: 3px 1px; }
}
/* ════════════════════════════════════════════════════════════
§8 MODALES
════════════════════════════════════════════════════════════
styles.css ya lleva 10 tarjetas de modal a pantalla completa en
640px. Faltan las de los módulos nuevos y las capas de fondo. */
@media (max-width: 640px) {
.des-modal-box, .gv-modal2-card, #chucho-admin-modal > * {
width: 100%;
max-width: 100%;
max-height: 88vh;
overflow-y: auto;
}
.des-modal, .ma-zoom-modal { padding: 12px; }
/* Los botones del pie del modal, apilados y a ancho completo.
Dos botones de 100px pegados, uno de ellos "Eliminar", en un
teléfono, es un borrado accidental esperando a pasar. */
.ma-modal-btns, .pp-modal-btns, .hx-modal-actions,
.gv-modal-footer, .gv-modal2-actions, .hor-modal-footer {
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
}
.ma-modal-btns > button, .pp-modal-btns > button,
.hx-modal-actions > button, .gv-modal-footer > button,
.gv-modal2-actions > button, .hor-modal-footer > button {
width: 100%;
}
}
/* column-reverse: el botón principal (que en el HTML va de último)
queda arriba, que es donde llega el pulgar primero. */
/* ════════════════════════════════════════════════════════════
§9 LO QUE SE DIBUJA CON style="" DENTRO DEL JS
════════════════════════════════════════════════════════════
Un `style=""` en el HTML le gana a cualquier hoja de estilos, sin
importar el orden ni la especificidad. La ÚNICA forma de corregirlo
desde CSS es !important. Se usa acá y en ningún otro lugar de este
archivo, y solo sobre elementos con id propio — nada genérico.
Alternativa descartada: editar modules/rendimiento-semanal.js.
Son 2.128 líneas con finales de línea CRLF; tocarlo por dos grids
marcaría el archivo entero como cambiado en GitHub y arriesga lo
que ya funciona, para el mismo resultado visual. */
@media (max-width: 640px) {
/* Rendimiento Semanal: "Mejores" y "Peores" lado a lado (1fr 1fr) */
#rs-tops { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
/* Las tarjetas de KPI: minmax(140px,1fr) da 2 columnas de 140px con
números de 4 caracteres. Mejor dos columnas holgadas. */
#rs-kpis { grid-template-columns: repeat(2, 1fr) !important; }
/* El combo de agente tiene min-width:260px en línea; en 360px con
padding se pasa. */
#rs-combo { min-width: 0 !important; width: 100%; }
}
/* ════════════════════════════════════════════════════════════
§10 ÁREAS TÁCTILES Y DETALLES
════════════════════════════════════════════════════════════
styles.css ya pone 44px mínimo a `button` y `select` en pantallas
táctiles. Faltan los que no son