de ayuda, que como item flex se iba AL LADO del label en vez de abajo. · configuracion_negocio.php:336/350 y ~20 iguales — el switch trae SOLO el ; su texto vive en un

HERMANO. Centrar en 44px hundía el switch ~13px por debajo del texto al que pertenece. · App-wide: Bootstrap coloca el cuadrito con float + margen negativo contra el padding-left del padre. float no aplica a hijos flex, así que el espacio cuadrito↔label pasó de ~8px a 0. Intento 3 — ".form-check-label{min-height:44px;display:inline-flex}" (agrandar solo el label, que es lo que el for= hace tocable). Rompe la alineación vertical: el cuadrito lo posiciona el float en la PRIMERA línea del bloque, mientras el texto del label se centra en sus 44px nuevos. Medido en configuracion_negocio.php: los 14 checkboxes de "Bancos con que Trabaja" quedaban descuadrados 8.7px cada uno (centro del cuadrito en y=748.4, centro del label en y=757.1). Además el inline-flex se comía el espacio en blanco entre el del ícono y el texto ("⚠Solo sin contacto" pegado), que hubo que reponer con un gap. El patrón común: el layout de Bootstrap para checkboxes ata la posición del cuadrito a la primera línea de texto. Cualquier cosa que cambie el alto del label o del contenedor los separa. Subirlos de verdad pide rediseñar el componente, no parchar CSS — y eso es un cambio de diseño que merece su propio issue, no un rincón de este PR. Se deja como está y se reporta. Qué pasa mientras tanto: el cuadrito mide 28×18.4 y el label su alto natural. El área tocable REAL sigue siendo el label completo gracias al for=, y tests/e2e-browser/tap-targets.spec.js lo prueba tocando el extremo de la fila y comprobando que el switch cambia. No llega a 44px, y este comentario existe para no fingir que sí. */ /* ── "Volver al POS" (topbar) ──────────────────────────────── #906: medía 24×10 en iPhone — no era un botón chico, era un hijo flex APLASTADO. El
del topbar es un contenedor flex sin wrap; con varios items compitiendo por el ancho, ese
se encogía por debajo de su propio contenido. No hace falta una regla propia. El primer arreglo de #906 le puso flex-shrink:0 al
(vía :has()) y al link — y el mutation-check demostró que era CÓDIGO MUERTO: borrando ambas reglas el botón sigue midiendo 44×44. El motivo es que #bs-volver-pos lleva la clase .btn, y el min-width/min-height de arriba ya lo protege: un flex item no puede encogerse por debajo de su propio min-width, sin importar el flex-shrink. Se borró en vez de dejarla "por si acaso" — una regla que no hace nada igual se lee como si hiciera algo, y encima :has() pedía WebKit 15.4+ para nada. La aserción de tap-targets.spec.js sobre #bs-volver-pos se queda: lo que vigila es que el control no vuelva a aplastarse, no el mecanismo con el que se arregló. */ /* ── Flecha para cerrar el sidebar deslizante (NO el hamburger del topbar, #headerCollapse, que ya mide 50×70 y no necesita nada) ─────────────────────────────────────────────────────── */ .sidebartoggler.ms-auto { min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } /* ── Dashboard: accesos rápidos del hero + CTA "Ver todo →" ───── */ .dash-welcome-actions .btn-quick { min-height: var(--tap-min); } .dash-tareas-cta { display: inline-flex; align-items: center; min-height: var(--tap-min); } /* ── POS: botones de modo (Facturar/Turno/Cliente), "+Producto/ Cert/Paquete/Servicio" y "Abrir Panel Completo" — todos ya traen display:inline-flex + align-items:center propio en pos.php, así que acá solo hace falta el alto mínimo. ────────── */ .pos-mode-btn, .pos-add-btn, .pqi-open-panel { min-height: var(--tap-min); } /* Logo del topbar del POS — mismo trato; .pos-topbar .pos-brand ya centra con align-items:center. */ a.pos-brand { min-height: var(--tap-min); } /* ── Login ──────────────────────────────────────────────────── */ .btn-instalar-login { min-height: var(--tap-min); } /* El enlace "¿Olvidaste tu contraseña?" no tenía clase ni id en public/index.php — se le agregó .link-forgot-pwd solo para poder targetearlo desde CSS (el texto no cambió). */ .link-forgot-pwd { display: inline-flex; align-items: center; min-height: var(--tap-min); } /* ── Clientes: link del nombre en la tabla — acepta filas más altas a propósito (así lo pide el #906). ───────────────────── Nota: el mismo nombre de clase se reutiliza en el botón-lápiz de la misma fila (ver cl_render_row() en controllers/clientes_controller.php) — ese botón ya sube a 44×44 por la regla general de .btn de arriba, así que acá no hace falta nada extra para él. */ .btn-ficha { display: inline-flex; align-items: center; min-height: var(--tap-min); } } /* ── Casillas visibles sobre cualquier fondo ─────────────────────────────── El tema (styles.css) deja `--bs-form-check-bg: transparent` y el borde en var(--bs-border-color) = #dfe5ef. Sobre blanco eso ya es un contraste de ~1.2:1 — por debajo del 3:1 que WCAG 2.2 pide para un control —, y sobre cualquier panel de color la casilla desaparece del todo: en "Requiere ficha técnica" (servicios), que vive dentro de un recuadro verde claro, el usuario veía SOLO el letrero y daba por hecho que la opción no existía. La casilla estaba ahí y respondía al clic; simplemente no se veía. Fondo blanco propio (la separa del panel, sea del color que sea) y borde con contraste real. Se excluye :checked y :indeterminate para no pisar el relleno de marca que ya les pone Bootstrap. */ .form-check-input:not(:checked):not(:indeterminate) { background-color: #fff; border-color: #5a6a85; } /* ── Sidebar: el área desplazable mide lo que sobra ─────────────────────── El tema fija la altura del menú con un calc() a mano (.left-sidebar .scroll-sidebar { height: calc(100vh - 175px) }) escrito ANTES de que el sidebar tuviera buscador. Con la barra de búsqueda (52px) y el logo (70px) arriba, ese calc() dejaba el menú más alto que el espacio real: la ÚLTIMA entrada quedaba debajo del borde de la pantalla y no había forma de llegar a ella ni desplazando hasta el final. Se ve en la consola de superadmin, que es el menú más largo, y empeora con cada entrada nueva. Arreglo: columna flex. El logo y el buscador toman lo suyo y el menú se queda con el resto, sea cual sea la altura de la ventana o lo que crezca la cabecera. `min-height: 0` es obligatorio — sin él un hijo flex no baja de su altura de contenido y no desplaza. */ .left-sidebar > .bs-sidebar-col { display: flex; flex-direction: column; height: 100%; min-height: 0; } .left-sidebar .scroll-sidebar { flex: 1 1 auto; min-height: 0; height: auto; } /* ── Por qué el menú NO lleva overflow:hidden ───────────────────────────── Hubo aquí una regla .left-sidebar .scroll-sidebar[data-simplebar=INIT] { overflow: hidden } para quitar el segundo desplazador (el tema deja overflow-y:auto en el anfitrión y el .simplebar-placeholder lo volvía desplazable además del de SimpleBar). Salió en v0.1.124 y DEJÓ EL MENÚ SIN DESPLAZAMIENTO NINGUNO en producción. Por qué: SimpleBar decide si hay desbordamiento midiendo el anfitrión. Con overflow:hidden concluye que no hay nada que desplazar y SE APAGA SOLO: quita la clase `simplebar-scrollable-y` y pone `overflow:hidden` en su propio content-wrapper. Medido en el navegador sobre v0.1.124: clases del anfitrión `sidebar-nav scroll-sidebar` (sin `simplebar-scrollable-y`), estilo en línea del wrapper `overflow: hidden`, 70px de contenido inalcanzable y sin barra a la vista. O sea: el arreglo de un defecto cosmético creó uno que impedía USAR el menú. Se revierte. Vuelve el segundo desplazador (arrastrar la barra se queda corto; la rueda sí llega al final), que es muy preferible a un menú que no se mueve. El arreglo correcto no pasa por el overflow del anfitrión. Lo vigila tests/e2e-browser/sidebar-scroll.spec.js: SimpleBar encendido, barra con alto > 0, y la rueda moviendo el menú de verdad. ────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════ Miga de pan (breadcrumbs) — lib/breadcrumbs.php + partials/topbar.php. Vive justo debajo de la barra global (
) y por encima del page-hero de cada vista. NN/g "Breadcrumbs: 11 Design Guidelines": jerarquía del menú, no historial; la pantalla actual no es un enlace. Nota: no existe un token --ink-soft en app-tokens.css — se usa --surface-800 (texto secundario) para los ítems intermedios y --surface-900 (texto principal) para el actual, que son los tokens equivalentes ya definidos ahí. ══════════════════════════════════════════════════════════════ */ .app-breadcrumb { background: transparent; padding: 6px 26px; overflow-x: auto; white-space: nowrap; /* nunca 2 líneas — regla NN/g de móvil */ -ms-overflow-style: none; scrollbar-width: none; } .app-breadcrumb::-webkit-scrollbar { display: none; } .app-breadcrumb .breadcrumb { --bs-breadcrumb-divider: '\203A'; /* › */ margin: 0; font-size: 13px; display: inline-flex; align-items: center; flex-wrap: nowrap; } .app-breadcrumb .breadcrumb-item { color: var(--surface-800); display: inline-flex; align-items: center; } .app-breadcrumb .breadcrumb-item a { color: var(--surface-800); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; /* en escritorio la miga es angosta (8px 26px 4px de padding) */ } /* Tap target: 44px solo hace falta cuando el dedo es la entrada — móvil. */ @media (max-width: 767.98px) { .app-breadcrumb .breadcrumb-item a { min-height: 44px; } } .app-breadcrumb .breadcrumb-item a:hover { color: var(--primary); text-decoration: underline; } .app-breadcrumb .breadcrumb-item.active { color: var(--surface-900); font-weight: 600; } .app-breadcrumb .app-bc-ellipsis { display: none; } /* solo aparece <576px */ @media (max-width: 575.98px) { /* Regla NN/g de móvil: nunca 2 líneas. En vez de envolver, se colapsan TODOS los grupos intermedios en un solo "…" — Inicio › … › Actual. */ .app-breadcrumb .breadcrumb-item.app-bc-group { display: none; } .app-breadcrumb .app-bc-ellipsis { display: inline-flex; } } /* ── Atajos del topbar (spec 2026-09-15 "Volver al menú v1 para todos + atajos de uso frecuente en el topbar", Parte B) — grupo ligero de contorno junto a "Ir al POS" (que sigue siendo el único botón sólido). Tokens de app-tokens.css: borde y texto --brand-600, fondo hover/activo --brand-50, radio 8px, alto 32px — mismas medidas que "Instalar app". Clase .btn en el anchor: bs-theme-beautysoft.css trae "a:not(.btn):not(.nav-link):not(.sidebar-link):not(.dropdown-item)" con especificidad (0,5,1) que le gana a una clase sola — el escape es .btn, no una guerra de especificidad (ver reference_theme_anchor_specificity_trap). */ .bs-atajos { display: inline-flex; align-items: stretch; height: 32px; border: 1px solid var(--brand-600); border-radius: 8px; overflow: hidden; } .bs-atajos .bs-atajos__item { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; margin: 0; border: 0; border-right: 1px solid var(--brand-600); border-radius: 0; background: transparent; color: var(--brand-600); font-size: .78rem; font-weight: 600; line-height: 1; text-decoration: none; } .bs-atajos .bs-atajos__item:last-child { border-right: 0; } .bs-atajos .bs-atajos__item:hover, .bs-atajos .bs-atajos__item:focus-visible { background: var(--brand-50); color: var(--brand-600); text-decoration: none; } .bs-atajos .bs-atajos__item.is-active { background: var(--brand-50); font-weight: 700; } .bs-atajos__toggle { background: transparent; color: var(--brand-600); border: 1px solid var(--brand-600); font-weight: 600; font-size: .78rem; padding: 5px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; } .bs-atajos__toggle:hover, .bs-atajos__toggle:focus-visible { background: var(--brand-50); color: var(--brand-600); } /* Piso táctil del dropdown del teléfono (#906): filas ≥44px. */ .bs-atajos-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; } .bs-atajos-menu .dropdown-item.is-active { background: var(--brand-50); color: var(--brand-600); font-weight: 700; } /* #906: en táctil (any-pointer: coarse) el bloque de arriba (~L1778) sube .btn a 44px de piso, pero .bs-atajos fija height:32px + overflow:hidden y .bs-atajos__item hereda height:100% del padre — el hijo queda RECORTADO a 32px sin importar su propio min-height. Esta regla tiene que ir DESPUÉS del bloque de arriba en el archivo (misma especificidad 0,1,0: gana el que carga último) para que el auto/min-height de acá no lo pise el height:32px fijo de escritorio. tests/e2e-browser/tap-targets.spec.js (ipad: .bs-atajos__item; iphone: .bs-atajos__toggle) lo vigila. */ @media (any-pointer: coarse) { .bs-atajos { height: auto; min-height: var(--tap-min); } } /* ═══════════════════════════════════════════════════════════════════════ Teléfono (#1205) — barrido de 135 pantallas a 390px en WebKit (tools/mobile_sweep.js). Todo lo de aquí es ≤575.98px: escritorio y tablet no cambian. La guarda es tests/e2e-browser/mobile-every-screen.spec.js. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 575.98px) { /* Topbar: con el piso táctil de 44px (#906) los seis controles de la derecha (instalar, Atajos, POS, ayuda, avatar) más sus márgenes me-2 medían 405px en una pantalla de 390 — el avatar quedaba cortado en 93 pantallas. Se aprietan los márgenes, no los controles. */ .topbar .navbar-nav.ms-auto > .nav-item { margin-right: 2px !important; margin-left: 0 !important; } .topbar .navbar-nav.ms-auto { min-width: 0; } .bs-atajos__toggle { padding: 5px 8px; } /* Buscador de DataTables: el min-width:320px de arriba (~L674) más la etiqueta "Buscar:" que traen las tablas iniciadas con .DataTable() directo (r_clientes, r_suplidores, r_eficiencia_laboral…) medía ~380px en una tarjeta de 326 — la caja se salía por la derecha. En el teléfono el buscador ocupa el ancho de la fila y se encoge con ella. */ .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter label { width: 100%; } .dataTables_wrapper .dataTables_filter input { min-width: 0; flex: 1 1 auto; width: auto; } /* Primera columna de una tabla DataTables (el nombre: "Apellidos, Nombres" + avisos): puede partirse en líneas. Muchas tablas son .text-nowrap (utilidad con !important) y en el teléfono el nombre en una sola línea más la columna de acciones (que ya no se pliega) no cabían: empleados.php medía 426px en 326 con todo lo demás plegado. */ table.dataTable > tbody > tr > td:first-child, table.dataTable > tbody > tr > td:first-child .badge { white-space: normal !important; } table.dataTable > tbody > tr > td:first-child .badge { text-align: left; } } /* #1205: el min-width:44px de .btn (#906, arriba) tiene un efecto colateral en filas flex. Un item flex trae por defecto min-width:auto, que significa "nunca más angosto que mi propio texto"; al fijarle 44px, ese piso desaparece y una fila apretada encoge el botón hasta 44px con el texto colgando por fuera ("Salir de impersonación" en el banner rojo, "Ir a Cuentas Bancarias" en contabilidad_puesta_en_marcha.php). flex-shrink:0 devuelve el piso: el botón conserva su ancho y lo que se acomoda es el texto vecino, que sí puede partirse en líneas. */ @media (any-pointer: coarse) { /* En toda pantalla táctil, teléfono y iPad (el iPad es el equipo de los salones, #906). Primero fue solo teléfono; el barrido del iPad Pro 11 (834 y 1194px) encontró los mismos botones aplastados bajo su texto ("Ir a Cuentas Bancarias", r_movimientos_bancarios). La fila que ya no cabe la recoge la regla de abajo, que también vale en táctil. Un .w-100 está hecho para ceder: si no encoge, empuja a su vecino fuera de la fila (el "×" de cotizaciones.php:115, revisión de #1205). */ .btn:not(.w-100) { flex-shrink: 0; } .d-flex:has(> .btn) { flex-wrap: wrap; } } /* #1205 — .table-stack: tabla corta que en el teléfono se lee fila por fila. Cada pasa a ser un bloque: la primera celda (el nombre) ocupa la línea completa y el resto se acomoda debajo; una celda .text-end (las acciones) se va a la derecha. Se usa en tablas de POCAS columnas cuyo contenido se entiende sin encabezado (nombre · estado · fecha · botones), p.ej. los cuatro bloques de superadmin/overview.php, donde los botones de contacto quedaban fuera de la pantalla. Una tabla de reporte NO lleva esto: ésas se deslizan con la primera columna fija (report-shell.css). Si una celda necesita su etiqueta, ponle data-label="…" y se muestra delante. */ @media (max-width: 575.98px) { .table-stack > thead { display: none; } .table-stack, .table-stack > tbody { display: block; width: 100%; } .table-stack > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .65rem .25rem; border-bottom: 1px solid var(--bs-border-color); } .table-stack > tbody > tr > td { display: block; border: 0; padding: 0; background: transparent; box-shadow: none; } .table-stack > tbody > tr > td:first-child { flex-basis: 100%; } /* Un