y cada | se
convierte en una fila propia con su etiqueta a la izquierda (tomada del
atributo data-label) y el valor a la derecha. Requiere que el |
correspondiente traiga data-label="Nombre de columna" — se está agregando
vista por vista; donde todavía no está, la tabla simplemente sigue
mostrando scroll horizontal como hasta ahora (no se rompe nada). */
@media (max-width: 700px) {
.table-wrap.cards-mobile { overflow-x: visible; }
.table-wrap.cards-mobile table,
.table-wrap.cards-mobile thead,
.table-wrap.cards-mobile tbody,
.table-wrap.cards-mobile th,
.table-wrap.cards-mobile td,
.table-wrap.cards-mobile tr { display: block; width: 100%; }
.table-wrap.cards-mobile thead { display: none; }
.table-wrap.cards-mobile tbody tr {
border: 1px solid var(--border-glow);
border-radius: var(--radius-md, 10px);
margin-bottom: 10px;
padding: 10px 12px;
background: var(--bg-surface);
}
.table-wrap.cards-mobile tbody tr:last-child { margin-bottom: 0; }
.table-wrap.cards-mobile td {
padding: 8px 0 !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: right;
padding: 8px 0;
border: none;
border-bottom: 1px solid var(--glass-light);
white-space: normal !important;
max-width: none !important;
}
.table-wrap.cards-mobile tr td:last-child { border-bottom: none; }
.table-wrap.cards-mobile td[data-label]::before {
content: attr(data-label);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--ink-3);
text-align: left;
flex-shrink: 0;
}
/* La primera celda de cada tarjeta (normalmente el nombre/folio — lo que
identifica esa fila) se destaca un poco: sirve de "título" de la
tarjeta y ayuda a ubicarse antes de leer el resto de los datos. */
.table-wrap.cards-mobile tr td:first-child {
padding-top: 2px;
padding-bottom: 10px;
margin-bottom: 2px;
border-bottom: 1px dashed var(--glass-light);
}
.table-wrap.cards-mobile tr td:first-child::before {
color: var(--ink-2);
}
/* Celdas sin data-label (ej. una sola con colSpan para "sin resultados")
no muestran etiqueta ni el layout de dos columnas. */
.table-wrap.cards-mobile td:not([data-label]) {
display: block;
text-align: left;
}
/* Botón de acción único dentro de una tarjeta (ej. "Generar CFDI",
"Emitir complemento" en Facturación): ocupa todo el ancho de la tarjeta
en vez de quedar pegado a un lado. Solo aplica cuando el botón es hijo
directo de la celda — los grupos de varios botones (dentro de un div)
no se tocan. */
.table-wrap.cards-mobile td:not([data-label]) > .btn,
.table-wrap.cards-mobile td[data-label="Acción"] > .btn {
width: 100%;
justify-content: center;
margin-top: 4px;
}
.table-wrap.cards-mobile td[data-label="Acción"] { display: block; }
.table-wrap.cards-mobile td[data-label="Acción"]::before { display: none; }
}
@media (max-width: 640px) {
/* Filtros de Gastos (proveedor, forma de pago, fecha inicio/fin): en vez
de amontonarse en 4 renglones sueltos, se acomodan en pares de 2
columnas (proveedor+forma de pago arriba, fechas abajo, una a cada
lado) y el texto seleccionado va centrado en los selects. */
.gastos-filtros { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
.gastos-filtros select,
.gastos-filtros input { width: 100% !important; text-align-last: center; text-align: center; }
/* Filtros de Historial de cobros: el select tenía marginLeft:auto para ir
pegado a la derecha en escritorio; en celular va en su propia fila. */
/* Recordatorios: el select "Ordenar" baja a su propia fila, ancho completo.
Reportes: el botón Exportar baja debajo del selector de periodo. */
.recordatorios-controles { flex-direction: column; align-items: stretch !important; }
.recordatorios-controles select { width: 100% !important; margin-left: 0 !important; }
.reportes-periodo-bar { flex-direction: column; align-items: stretch !important; }
.reportes-periodo-bar > .btn { width: 100%; justify-content: center; }
.usuarios-filtros { flex-direction: column; align-items: stretch !important; }
.usuarios-filtros > .chip-row-fill { width: 100% !important; flex: 0 0 auto !important; }
.usuarios-filtros .search-bar { margin-left: 0 !important; min-width: 0 !important; width: 100%; }
.cobros-filtros { flex-direction: column; }
.cobros-filtros select { width: 100% !important; margin-left: 0 !important; }
/* Barra de "Conceptos" en Caja. Causa raíz de que el buscador no ocupara todo el ancho: .pos-header es
una fila flex y dejaba el bloque título+buscador y las categorías LADO A
LADO. En celular se apilan: título, buscador (ancho completo), categorías. */
.pos-header { flex-direction: column; align-items: stretch !important; gap: 8px; }
.pos-header > * { width: 100%; min-width: 0; }
.pos-header-top {
flex-direction: column;
align-items: stretch !important;
}
.pos-header-top .search-bar { width: 100%; }
/* Chips de categoría ("Todos", "Por categoría", "Descuentos"...): en vez
de envolverse en un bloque de varias filas que empuja el contenido hacia
abajo, se deslizan en una sola fila horizontal — mismo patrón que ya se
usa abajo para los métodos de pago del carrito. */
.pos-cat-tabs {
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.pos-cat-tabs::-webkit-scrollbar { display: none; }
.pos-cat-tabs > button { flex: 0 0 auto; }
/* Fila de acciones de cada tarjeta de familia (editar, añadir estudiante,
ficha, vincular): en escritorio caben junto al badge de saldo; en
celular se veían amontonadas. Bajan a su propia fila, en dos columnas. */
.fam-row-actions { flex-direction: column; align-items: stretch !important; }
.fam-actions-buttons {
width: 100%;
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.fam-actions-buttons > button { width: 100%; }
/* Flechita de expandir/contraer la tarjeta de familia: al apilar todo en
columna quedaba pegada abajo a la izquierda. Se manda al lado derecho,
que es donde se espera un indicador de "abrir/cerrar". */
.fam-chevron { display: flex; justify-content: flex-end; width: 100%; }
/* Saldo/"Al corriente" de cada hijo dentro de la ficha de familia: se
centra en vez de quedar pegado a la izquierda al apilarse. */
.fam-hijo-saldo { display: flex; justify-content: center; width: 100%; text-align: center; }
}
@media (max-width: 480px) {
/* Tarjetas de rol en "Mi equipo" (Admin/Cajero/Familia...): con una sola
columna cada tarjeta ocupa todo el ancho y obliga a bajar mucho para
ver las demás. Se mantienen en 2 columnas también en celulares chicos —
el contenido (ícono, número, etiqueta) cabe bien así. */
.roles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ══════════════════════════════════════════════════════════════════════
SUPER ADMIN — Colegios / Inquilinos (27-sep-2026)
La rejilla de colegios tenía 4 columnas fijas en línea (sin clase), así que
en tablet/celular las tarjetas quedaban aplastadas. Se baja a 2 columnas y
luego a 1. Los !important son necesarios porque el valor viene inline.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.esc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
.esc-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
/* Buscador a todo el ancho; los dos selects (plan / estado) lado a lado. */
.esc-filtros { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.esc-filtros input { grid-column: 1 / -1; max-width: none !important; width: 100%; }
.esc-filtros select { max-width: none !important; width: 100%; text-align-last: center; }
/* Paginación + "Alta escuela": el botón a ancho completo debajo. */
.esc-acciones { width: 100%; }
.esc-acciones > .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) {
/* Super Admin — filtros: selects/botones de Métricas Globales, Logs y
Comisiones ocupan el ancho completo en vez de quedar pegados a un lado. */
.sr-filtros { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; width: 100%; }
.sr-filtros select { width: 100% !important; text-align-last: center; }
.sr-filtros > .btn { width: 100%; justify-content: center; }
.logs-filtro { width: 100%; text-align-last: center; }
.card-header:has(> .logs-filtro) { flex-direction: column; align-items: stretch; gap: 10px; }
.com-busqueda { flex-direction: column; align-items: stretch !important; }
.com-busqueda > .search-bar { max-width: none !important; width: 100%; }
.com-busqueda > .btn { width: 100%; justify-content: center; }
}
/* ══════════════════════════════════════════════════════════════════════
PORTAL FAMILIA — ajustes móviles (27-sep-2026)
1) No dejaba llegar al final de ninguna sección: .pf-root trae
height:100vh EN LÍNEA, y en celular 100vh es más alto que la pantalla
visible (la barra del navegador tapa la parte de abajo), así que el
último tramo quedaba fuera de alcance. #root y .app ya usan 100dvh;
aquí faltaba. El !important es necesario porque el valor viene inline.
2) Cabecera: en celular las acciones (tema, avatar, guía, salir) caían a un
segundo renglón pegadas a la izquierda. Ahora se quedan en la MISMA fila,
a la derecha, como botones redondos parejos.
══════════════════════════════════════════════════════════════════════ */
.pf-root { height: 100vh !important; height: 100dvh !important; }
.pf-body { padding-bottom: calc(clamp(18px,3vw,30px) + env(safe-area-inset-bottom, 0px) + 24px) !important; }
@media (max-width: 640px) {
.pf-header { flex-wrap: nowrap !important; padding: 8px 12px !important; gap: 8px !important; }
.pf-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.pf-header-actions { margin-left: auto; flex: 0 0 auto; gap: 6px !important; }
.pf-header-user-name { display: none !important; }
.pf-header-actions .theme-toggle,
.pf-header-actions .btn-ghost {
width: 36px; height: 36px; padding: 0 !important; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border-glow) !important; border-radius: 50%;
background: var(--bg-surface-2, var(--glass-light));
}
}
/* Portal Familia: el logo ya dice "Paga la Escuela" y "Portal familiar" se
sobreentiende, así que en celular el texto repetido junto al logo se quita
para dar espacio a los botones de la derecha (tema, avatar, guía, salir). */
@media (max-width: 640px) {
.pf-brand-text { display: none !important; }
}
|