/* Pagos · submódulo de Finanzas. Hoja propia del módulo; sólo lo que NO da ninguna pieza del * catálogo (tabla, pantalla-lista, banner, cajón, registro de actividad, FieldRow, Input, Menú): * el atributo `hidden` sobre piezas cuyo `display` lo pisaría, la colocación de los formularios de F4 (cajón de «Nuevo pago» / «Pago recurrente»). * GATE-ALLOW: movil · el backoffice es STAFF de escritorio, sin ancho de teléfono (CLAUDE.md #7) */ /* El atributo `hidden` tiene que ganarle al `display` de cada pieza: sin esto el panel «sin permiso» (6d) y la lista se verían a la vez. Id > clase, sin `!important`. */ #pagosTabs[hidden], #pagosPl[hidden], #pagosRecPl[hidden], #pagosValPl[hidden], #pagosNuevo[hidden], #pagosVacioNuevo[hidden], #pagosNuevoRec[hidden], #pagosRecVacioNuevo[hidden], #pagosSinPermiso[hidden] { display: none; } /* 6d · el vacío de «sin permiso» llena el panel y se centra; es la pieza `.exds-estado` tal cual. */ #pagosSinPermiso { flex: 1 1 auto; justify-content: center; } /* F4 · el «⋯» de la fila cae siempre en su carril de 48 px (con o sin acciones el chevrón no se mueve): el menú se centra en su celda. */ #pagosTabla .exds-td[data-pagos-nofila] > .exds-menu, #pagosRecTabla .exds-td[data-pagos-nofila] > .exds-menu { margin: 0 auto; } /* Las celdas con un control (monto, «⋯», «Agregar a pagos») no llevan el relleno de texto de la tabla alrededor del control: el control ya trae su propio aire y la fila no puede crecer. */ #pagosTabla .exds-td[data-pagos-nofila], #pagosRecTabla .exds-td[data-pagos-nofila] { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; } #pagosTabla .exds-td[data-pagos-nofila] .exds-input-wrap { width: 100%; } /* La cifra editable termina en el MISMO borde que la de las filas que no se editan (la caja tenía 12 px de relleno a la derecha + 2 del campo + 1 de borde: la cifra acababa 15 px antes). Sin relleno a la derecha y con el borde de 1 px dentro del relleno de la celda (12 px), el último dígito cae donde cae el de un monto fijo. */ #pagosTabla .exds-td[data-pagos-nofila] .exds-input-wrap[data-en-fila] { padding-right: 0; width: calc(100% + 1px); margin-right: -1px; } #pagosTabla .exds-td[data-pagos-nofila] .exds-input-wrap[data-en-fila] .exds-input-ctrl { padding-right: 0; } /* F4 · formularios en el cajón lateral = CAJÓN DE ACCIÓN (`css/cajon-accion.css`, copia del catálogo): el cuerpo no lleva relleno ni hueco propios, cada grupo trae el suyo. Aquí sólo el hueco del bloque que se repinta solo bajo el Beneficiario: sin contacto elegido está vacío y no debe dejar su hueco de 12 px. */ [data-pf-resto]:empty { display: none; } /* F4c (QA) · TABLA: el piso de ancho. Con el cajón abierto sólo quedan ~700 px; la suma de los mínimos de las pistas de `pagos.js` (COLS / COLS_REC) es el mínimo de la fila y de la cabecera, y lo que no cabe se arrastra en horizontal — el mismo mecanismo que usa Facturación (`[data-view="finanzas"] .exds-pl-row`). Sin esto, las pistas de texto bajaban a 24 px y los títulos quedaban encimados. */ #pagosTabla .exds-tabla-head, #pagosTabla .exds-tr { min-width: 1042px; } /* 40+180+140+150+150+150+144+48+40 */ #pagosRecTabla .exds-tabla-head, #pagosRecTabla .exds-tr { min-width: 1078px; } /* 180+140+120+140+150+130+130+48+40 */ /* El monto editable lleva la cifra a la derecha, igual que el monto de las filas que no se editan. */ #pagosTabla .exds-input-ctrl[data-pagos-monto] { text-align: right; } /* selects: la envoltura de globo ocupa toda la caja */ [data-pf-cuerpo] .exds-input-wrap--select > .exds-tip-wrap { display: flex; flex: 1 1 auto; min-width: 0; } [data-pf-cuerpo] .exds-input-wrap--select .exds-input-ctrl { width: 100%; } /* Sin permiso de Contactos no se puede dar de alta: la salida del Combobox («Darlo de alta en Contactos») y su raya no se ofrecen. */ .exds-combobox[data-sin-alta] .exds-combobox-opt--other, .exds-combobox[data-sin-alta] .exds-combobox-sep { display: none; } /* El error de una OptionList sin elegir es un estado de la PIEZA (option-list.css/.js): no lo pinta esta hoja. */ /* F5 · la barra de la selección en grupo es una Card clara con el aire de 12 px del patrón (`BarraSeleccion`, `padding={12}`). */ #pagosFranjaSel .exds-card { --card-padding: var(--space-3, 12px); } /* F5 · en el resultado de la firma la pastilla del estado va a la izquierda del monto, con el aire de una fila. */ .pagos-fx-res { margin-right: var(--space-4, 16px); } /* F6 · Validar cuentas: el piso de ancho de la tabla (la suma de los mínimos de `COLS_VAL`, 950 px: cabe entera en la tarjeta de 958 a 1280); lo que no cabe se arrastra en horizontal. */ #pagosValTabla { --exds-cols: 184px minmax(160px, 1.2fr) 130px 72px 112px minmax(126px, 0.8fr) 120px 40px; } #pagosValTabla .exds-tabla-head, #pagosValTabla .exds-tr { min-width: 944px; } /* 184(CLABE 18 dígitos + copiar)+160+130(RFC 13)+72+112(día)+126+120(Estado)+40 = 944, más 7 huecos de 2 px = 958 */ /* El esqueleto de carga usa la MISMA plantilla de columnas que su tabla (conciliacion.css: `--exds-pl-cols` en el contenedor de la lista). */ #pagosBody { --exds-pl-cols: 40px minmax(180px, 1.5fr) minmax(140px, 1.2fr) 150px 150px 150px 144px 48px 40px; } /* = COLS */ #pagosRecBody { --exds-pl-cols: minmax(180px, 1.4fr) minmax(140px, 1.3fr) 120px 140px 150px 130px 130px 48px 40px; } /* = COLS_REC */ #pagosValBody { --exds-pl-cols: 184px minmax(160px, 1.2fr) 130px 72px 112px minmax(126px, 0.8fr) 120px 40px; } /* = #pagosValTabla */ #pagosValBody .exds-pl-skel-row { min-width: 944px; } #pagosBody .exds-pl-skel-row { min-width: 1042px; } /* el piso de #pagosTabla */ #pagosRecBody .exds-pl-skel-row { min-width: 1078px; } /* el piso de #pagosRecTabla */ /* F5 · las listas a sangre de la ventana de firma son de UNA sola pista (el renglón de dos niveles ocupa toda la celda). */ #pagosFxLista, #pagosFxRes { --exds-cols: 1fr; } /* Homologación al canon (verificador-canon, DELTA 2026-10-10) · el aviso de TODA la pantalla va encima del patrón, con el aire de una franja. */ #pagosAvisoPantalla:empty { display: none; } /* El mismo aire arriba (contra la línea de las pestañas) que abajo (contra el patrón): «El aire debe ser igual entre todas las secciones y avisos» (Ricardo, 2026-10-03; PL-AIRE-1, 16). */ #pagosAvisoPantalla { margin-top: var(--space-4, 16px); margin-bottom: var(--space-4, 16px); } /* Nombre y concepto largos: «…» y globo sólo si se recorta (README › Reglas duras 18). La celda no impone su contenido a la pista. */ #pagosTabla .exds-td:has(> .exds-pl-dos), #pagosRecTabla .exds-td:has(> .exds-pl-dos), #pagosValTabla .exds-td:has(> .exds-pl-dos) { min-width: 0; overflow: hidden; } #pagosTabla .exds-pl-dos, #pagosRecTabla .exds-pl-dos, #pagosValTabla .exds-pl-dos { min-width: 0; } #pagosTabla .exds-pl-dos > .exds-tip-wrap, #pagosRecTabla .exds-pl-dos > .exds-tip-wrap, #pagosValTabla .exds-pl-dos > .exds-tip-wrap { display: flex; min-width: 0; } /* Validar cuentas · el avance de la validación en el cajón (hoja decidida 2026-10-29, opción C): la pieza Progress (progress.css) debajo de la tabla de Z2, con el texto del paso a la izquierda y el tiempo a la derecha. Sólo tokens; la barra y el aviso son piezas del catálogo. */ .pv-avance { display: grid; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); } .pv-avance [data-pv-tarda]:empty { display: none; } /* Avisos apilados: 12 px entre la nota y el aviso de STP (COMPONENTE_BANNER.md); vacío no añade aire. */ .pv-avance [data-pv-stp]:empty { display: none; } .pv-avance [data-pv-stp] .exds-banner { margin-top: var(--space-3, 12px); } /* Validar cuentas · el cajón cambia de la barra al resultado sin saltos (Ricardo, 2026-10-29): la zona de datos anima su alto con la receta de papel 2 (COMPONENTE_MOVIMIENTO; precedente COMPONENTE_UPLOADCARD `data-anima`), y lo que llega nuevo (tabla, fila «Contacto», pie) entra con opacidad a --motion-base. */ [data-pv-zona] { flex-shrink: 0; } /* hijo flex del área que se desplaza: no se aplasta mientras anima su alto */ [data-pv-zona][data-anima] { overflow: hidden; transition: height var(--motion-base, 250ms) var(--ease-default); } [data-pv-entra] { animation: pvEntra var(--motion-base, 250ms) var(--ease-default) backwards; } @keyframes pvEntra { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-pv-zona][data-anima] { transition: none !important; } [data-pv-entra] { animation: none !important; } }