que envuelve el contenido de wfPagoCuota.aspx). Así NO afectan a otras páginas del sitio. - Se dejan GLOBALES a propósito: * variables :root y el @import de fuentes, * los estilos de popups (.popupPatPac / .popup-patpac-*), porque DevExpress mueve el popup al , fuera de .cm-page, * el loading panel (modal a nivel de body), * la armonización del header de la MasterPage (.navbar / .bottom-header). - Todos los overrides usan !important para ganar a los estilos del tema DX. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap'); :root { --green-900: #063c2c; --green-800: #0a5640; /* corporativo modernizado (esmeralda) */ --green-700: #0c7050; --green-50: #eef6f1; --green-100: #dcebe3; --green-tint:#f3f8f5; --gold-600: #b8860b; --gold-500: #e0a800; --gold-400: #f0c53d; /* amarillo suavizado (antes #ffe600) */ --gold-50: #fdf8e7; --ink-900: #18211d; --ink-700: #38423d; --ink-600: #5a655f; --ink-400: #98a39d; --line: #e2e8e4; --line-strong:#cdd6d0; --surface-2: #f8faf9; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(16,40,28,.05), 0 1px 3px rgba(16,40,28,.06); --shadow-md: 0 2px 6px rgba(16,40,28,.06), 0 8px 24px rgba(16,40,28,.07); --ff-serif: "Source Serif 4", Georgia, serif; --ff-sans: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif; } /* ------------------------------------------------------------------ Base */ .cm-page, .cm-page .dxgvControl_MetropolisBlue, .cm-page .dxeBase_Material, .cm-page .dxeBase_iOS, .cm-page .dxflControl_iOS, .cm-page .dxtcLite_Moderno, .cm-page .dxpcLite_Material { font-family: var(--ff-sans) !important; color: var(--ink-900); } /* Centra y limita el ancho del contenido de la página. clear:both hace que el contenido caiga SIEMPRE debajo del header, evitando que el título del hero se solape con el logo (float:left de 165px) en escritorio. */ .cm-page { max-width: 1080px; margin: 0 auto; clear: both; } /* Sticky footer: el formulario (envuelve nav + contenido + footer) ocupa al menos el alto del viewport y el footer se ancla abajo. Evita el espacio blanco al final en pantallas altas (viewport más alto que el contenido). */ #form1 { display: flex; flex-direction: column; min-height: 100vh; } #form1 > footer { margin-top: auto; } /* Los ítems flex traen min-width:auto y NO se encogen bajo el ancho de su contenido: una grilla ancha desbordaba la pantalla en móvil. min-width:0 y max-width permiten que el contenido se ajuste al viewport. */ #form1 > * { min-width: 0; max-width: 100%; } /* H1 de la página */ .cm-page h1 { font-family: var(--ff-serif) !important; font-weight: 600 !important; font-size: clamp(28px, 4.5vw, 40px) !important; letter-spacing: -0.5px; color: var(--ink-900) !important; text-align: center; margin: 26px 0 6px !important; } .cm-page h1 b { font-weight: 600; } /* Encabezado (.pc-hero) — alineado a la izquierda como el mockup */ .cm-page .pc-hero { text-align: left; max-width: 1080px; margin: 28px auto 24px; padding: 0 16px; } .cm-page .pc-hero h1 { text-align: left; margin: 14px 0 10px !important; font-size: 30px; } .cm-page .pc-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); padding: 5px 14px; border-radius: var(--r-pill); } .cm-page .pc-eyebrow i { font-size: 11px; } .cm-page .pc-hero-sub { font-size: 13.5px; color: var(--ink-600); margin: 0 0 16px; max-width: 60ch; line-height: 1.5; } /* Link tutorial */ .cm-page .div_tutorial { text-align: left !important; max-width: 1080px; margin: 0 auto 22px !important; padding: 0 4px; font-size: 14px !important; } .cm-page .div_tutorial a { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong) !important; border-radius: var(--r-pill); padding: 8px 16px; font-weight: 600; box-shadow: var(--shadow-sm); transition: all .18s ease; color: var(--ink-900) !important; text-decoration: none !important; } .cm-page .div_tutorial a:hover { border-color: var(--green-100) !important; box-shadow: var(--shadow-md); transform: translateY(-1px); } .cm-page .div_tutorial b { color: var(--green-800) !important; } /* ------------------------------------------------------- FormLayout / cards */ .cm-page .formLayout { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px !important; margin: 0 auto 22px auto !important; } /* Encabezados de grupo (GroupBox HeadingLine) -> sección moderna */ .cm-page .formLayout .dxflGroupBox_iOS .dxflGroupBoxCaption_iOS, .cm-page .formLayout .dxflGroupBoxHeader, .cm-page .formLayout .dxflGroupCaption { font-family: var(--ff-sans) !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .8px; text-transform: uppercase; color: var(--green-800) !important; border-bottom: 2px solid var(--green-100) !important; padding-bottom: 9px !important; margin-bottom: 16px !important; } /* Etiquetas (captions de LayoutItem) */ .cm-page .formLayout .dxflControlCell, .cm-page .formLayout td.dxflCaptionCell, .cm-page .formLayout .dxflControlCaption { font-weight: 600 !important; color: var(--ink-700) !important; font-size: 13px !important; } /* ------------------------------------------------------------ Inputs (DX) IMPORTANTE: el borde va SOLO en el wrapper externo. El área de edición interna queda sin borde para evitar la "línea doble" dentro de la caja. */ .cm-page .dxeTextBox_Material, .cm-page .dxeButtonEdit_Material, .cm-page .dxeSpinEdit_Material, .cm-page .dxeTextBoxSys { border: 1.5px solid var(--line-strong) !important; border-radius: var(--r-md) !important; background: #fff !important; box-shadow: none !important; overflow: hidden; } /* tabla interna del control: sin bordes ni separaciones */ .cm-page .dxeTextBox_Material table, .cm-page .dxeButtonEdit_Material table, .cm-page .dxeSpinEdit_Material table, .cm-page .dxeTextBoxSys table { border: none !important; border-collapse: collapse !important; background: transparent !important; } .cm-page .dxeTextBox_Material td, .cm-page .dxeButtonEdit_Material td, .cm-page .dxeSpinEdit_Material td { border: none !important; } /* área de edición interna (input): SIN borde propio, fondo transparente */ .cm-page .dxeEditArea_Material, .cm-page .dxeEditAreaSys, .cm-page .dxeMemoEditArea_Material, .cm-page .formLayout input[type="text"], .cm-page .dxeTextBox_Material input, .cm-page .dxeSpinEdit_Material input, .cm-page .dxeButtonEdit_Material input { border: none !important; background: transparent !important; box-shadow: none !important; height: 42px !important; padding: 0 14px !important; font-size: 15px !important; font-family: var(--ff-sans) !important; color: var(--ink-900) !important; box-sizing: border-box; } /* Foco: el halo va en el wrapper */ .cm-page .dxeTextBox_Material.dxeFocused, .cm-page .dxeButtonEdit_Material.dxeFocused, .cm-page .dxeSpinEdit_Material.dxeFocused, .cm-page .dxfocused, .cm-page .dxeFocused { border-color: var(--green-700) !important; box-shadow: 0 0 0 3.5px var(--green-50) !important; } /* Inválido */ .cm-page .dxeInvalid, .cm-page .dxeInvalid.dxeTextBox_Material, .cm-page .formLayout .dxeInvalid input { border-color: #b4231f !important; background: #fbeceb !important; } /* Campos deshabilitados (DisabledStyle gris) -> el fondo va en el wrapper */ .cm-page .dxeDisabled.dxeTextBox_Material, .cm-page .dxeDisabled.dxeButtonEdit_Material, .cm-page .dxeDisabled { background: var(--surface-2) !important; border-color: var(--line) !important; } .cm-page .dxeDisabled input, .cm-page .dxeDisabled .dxeEditArea_Material { background: transparent !important; color: var(--ink-700) !important; -webkit-text-fill-color: var(--ink-700) !important; } /* SpinEdit: botones +/- sin línea dura, integrados al wrapper */ .cm-page .dxeSpinEdit_Material .dxeSpinIncrementButton, .cm-page .dxeSpinEdit_Material .dxeSpinDecrementButton, .cm-page .dxeSpinIncrementButton, .cm-page .dxeSpinDecrementButton { border: none !important; background: transparent !important; } /* ------------------------------------------------------------ Botón Buscar */ .cm-page .dxbButton_Mulberry, .cm-page .dxbButton_Material, .cm-page .formLayout .dxbButton { background: var(--green-800) !important; color: #fff !important; border: none !important; border-radius: var(--r-pill) !important; padding: 11px 24px !important; font-weight: 600 !important; font-size: 15px !important; box-shadow: none !important; transition: all .18s ease !important; } .cm-page .dxbButton_Mulberry:hover, .cm-page .dxbButton_Material:hover, .cm-page .formLayout .dxbButton:hover { background: var(--green-700) !important; box-shadow: 0 6px 16px rgba(0,73,44,.25) !important; transform: translateY(-1px); } .cm-page .dxbButton_Mulberry .dxb, .cm-page .dxbButton_Material .dxb { color: #fff !important; } /* Botón "Buscar" moderno: verde corporativo con degradado sutil, ícono (lupa) FontAwesome blanco, redondeo suave (12px) como los campos y sombra ligera. Reemplaza el look "anticuado" con ícono oscuro de DevExpress. */ .cm-page .cm-btn-buscar, .cm-page .cm-btn-buscar .dxb { border-radius: var(--r-md) !important; overflow: hidden; } .cm-page .cm-btn-buscar { background: linear-gradient(135deg, var(--green-700), var(--green-800)) !important; border: none !important; box-shadow: 0 4px 12px rgba(10,86,64,.22) !important; padding: 12px 30px !important; letter-spacing: .3px; } .cm-page .cm-btn-buscar .dxb { display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; color: #fff !important; } .cm-page .cm-btn-buscar .dxb i { color: #fff !important; font-size: 14px; } .cm-page .cm-btn-buscar:hover { background: linear-gradient(135deg, var(--green-800), var(--green-900)) !important; box-shadow: 0 8px 20px rgba(10,86,64,.30) !important; transform: translateY(-1px); } /* ------------------------------------------------- boldText (botones pago) */ .cm-page .boldText { background-color: var(--gold-400) !important; color: var(--green-900) !important; border: 1.5px solid var(--gold-500) !important; border-radius: var(--r-md) !important; font-weight: 700 !important; transition: all .18s ease !important; } .cm-page .boldText:hover { box-shadow: 0 8px 22px rgba(184,134,11,.22) !important; transform: translateY(-2px); filter: brightness(1.02); } /* Botón PAT/PAC verde corporativo */ .cm-page .btn-patpac { background-color: var(--green-800) !important; border-radius: var(--r-pill) !important; font-weight: 600 !important; box-shadow: none !important; } .cm-page .btn-patpac:hover { background-color: var(--green-700) !important; box-shadow: 0 6px 16px rgba(0,73,44,.25) !important; transform: translateY(-1px); } /* --------------------------------------------------- RadioButtonList (tipos) */ .cm-page .dxeRadioButtonList td label, .cm-page .dxeRBL td label { font-weight: 600 !important; color: var(--ink-700) !important; } /* ----------------------------------------------------------------- GridView */ .cm-page .cm-grid-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); } .cm-page .dxgvControl_MetropolisBlue, .cm-page .dxgvControl_MetropolisBlue table { border: none !important; border-color: var(--line) !important; } .cm-page .dxgvHeader_MetropolisBlue { background: var(--surface-2) !important; color: var(--ink-600) !important; font-weight: 700 !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--line) !important; } .cm-page .dxgvDataRow_MetropolisBlue td.dxgv { border-bottom: 1px solid var(--line) !important; font-variant-numeric: tabular-nums; padding: 12px 14px !important; } /* Hover de fila: SIN !important para no tapar celdas con fondo propio (ej. Estado Pago en verde) */ .cm-page .dxgvDataRow_MetropolisBlue:hover td.dxgv { background: var(--surface-2); } /* Botón PDF (ver comprobante) en grilla de pagos: ícono limpio, no píldora verde */ .cm-page .cm-pdf-btn, .cm-page .cm-pdf-btn.dxbButton_Material { background: transparent !important; border: none !important; padding: 4px 6px !important; min-width: 0 !important; width: auto !important; box-shadow: none !important; border-radius: 8px !important; transform: none !important; } .cm-page .cm-pdf-btn:hover, .cm-page .cm-pdf-btn.dxbButton_Material:hover { background: var(--green-50) !important; box-shadow: none !important; transform: none !important; } /* El ícono (img sprite de DevExpress) dentro del botón PDF: la regla global ".cm-page * { min-width:0; max-width:100% }" del breakpoint móvil lo colapsaba a 0px y no se veía. Le devolvemos tamaño y visibilidad. */ .cm-page .cm-pdf-btn img { display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: none !important; visibility: visible !important; opacity: 1 !important; } /* Separación con el footer + scroll horizontal contenido SIEMPRE (fuera de media queries): la grilla "Pagos Realizados" tiene 9 columnas de ancho fijo (~1235px) que desbordan el contenedor incluso en tablet/desktop (ej. iPad Air 820px). Sin overflow la tabla empujaba el ancho de toda la página; con overflow-x:auto el excedente se recorre dentro de la tabla y el body vuelve a medir el ancho del viewport. La regla genérica .cm-detalle-wrap solo trae overflow dentro de @media(max-width:800px), por eso este wrapper lo necesita en la regla base. */ .cm-page .cm-detalle-wrap--pagos { margin-bottom: 28px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; /* Evita que el arrastre horizontal lo capture el gesto de "swipe -> cambiar de página" nativo de DevExpress (activo en touch/emulación). Con touch-action el navegador maneja el paneo del contenedor con scroll, en vez de disparar la paginación del grid. */ touch-action: pan-x pan-y; } /* Padding lateral del panel "Pagos Realizados": como no está dentro de la tarjeta del formulario (a diferencia de "Detalle de Cuotas"), sin este inset la grilla quedaba pegada a los bordes de la pantalla. Insetea el título y la grilla juntos. */ .cm-page .cm-pagos-panel { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; } /* Encabezado de "Pagos Realizados" en DOBLE FILA: por defecto DevExpress usa white-space:nowrap en el header, lo que recorta títulos largos (ej. "Cuotas Canceladas") y además ensancha la columna. Permitimos el salto de línea natural según el ancho de columna. Acotado a --pagos para NO tocar "Detalle de Cuotas". */ .cm-page .cm-detalle-wrap--pagos .dxgvHeader_MetropolisBlue, .cm-page .cm-detalle-wrap--pagos .dxgvHeader_MetropolisBlue table, .cm-page .cm-detalle-wrap--pagos .dxgvHeader_MetropolisBlue td { white-space: normal !important; overflow: visible !important; height: auto !important; vertical-align: middle !important; } /* Cuotas seleccionadas para pagar: resaltadas con verde tenue + acento a la izquierda */ .cm-page tr.cm-cuota-sel td.dxgv { background: var(--green-50) !important; } .cm-page tr.cm-cuota-sel td.dxgv:first-child { box-shadow: inset 4px 0 0 var(--green-700); font-weight: 700; } .cm-page .dxgvSelectedRow_MetropolisBlue td.dxgv { background: var(--green-50) !important; } /* Botón expandir adaptativo en mobile */ .cm-page .dxgvCommandColumn_MetropolisBlue .dxgvCommandColumnItem, .cm-page .dxgvCommandColumn .dxgvCommandColumnItem { color: var(--green-800) !important; } /* Responsivo SOLO CSS (no toca markup ni AdaptivityMode de las grillas). Acotado a ≤800px, así el escritorio no se altera. El problema en móvil son los controles DevExpress que se renderizan como TABLAS (ASPxPageControl + grillas) y no se encogen bajo el ancho de su contenido, estirando todo "de Pagar Cuota hacia abajo". Aquí se tabulan dos cosas: 1) ningún elemento dentro de .cm-page supera el ancho de su contenedor; 2) las grillas conservan su ancho natural pero se deslizan dentro de su caja. */ @media (max-width: 800px) { /* CLAVE: max-width:100% evita desbordes, y min-width:0 permite que los contenedores FLEX de DevExpress (ASPxPageControl = dxtc-flex) y las celdas del FormLayout SE ENCOJAN al ancho de pantalla. Sin min-width:0, los items flex conservan el ancho de su contenido y estiran todo (el PageControl quedaba en 510px). */ .cm-page * { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* el relleno derecho de la tira de pestañas sumaba ancho extra */ .cm-page .dxtc-rightIndent { display: none !important; } /* columnas flotadas del FormLayout: quitar el float para que apilen. NO tocamos 'display' para no mostrar grupos ocultos (ej. "Adelantar Cuotas"). */ .cm-page .formLayout .dxflFloatedElConSys, .cm-page .formLayout .dxflElConSys { float: none !important; width: 100% !important; } /* El FormLayout (iOS) trae padding/margin horizontal en sus grupos y celdas que indenta y ensancha el contenido (el "mucho padding" visible). Lo anulamos solo en horizontal (preservando el vertical), sin tocar la grilla (dxgv) ni los inputs (dxe). */ .cm-page .formLayout [class*="dxfl"] { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* La grilla usa su modo adaptativo nativo (HideDataCells): en móvil muestra las columnas de mayor prioridad y oculta el resto en el detalle expandible. Solo la acotamos al ancho disponible (sin display:block, para no anular ese modo). */ .cm-page .dxgvControl_MetropolisBlue { max-width: 100% !important; } /* Causa raíz del desborde de la grilla "Detalle de Cuotas": DevExpress le fija a la tabla raíz un width en px (ej. 398px) = suma de columnas + scrollbar, que es mayor que el viewport. Ese ancho fijo empuja a toda la cadena de divs del FormLayout a ensancharse y desborda la tarjeta. Forzamos la tabla raíz de la grilla a width:100% + table-layout:fixed: se elimina el ancho fijo, la cadena colapsa al ancho de la tarjeta y las columnas se reparten en el espacio real. El wrapper con overflow-x:auto queda como red de seguridad para scroll. */ /* La grilla "Detalle de Cuotas"/"Pagos Realizados" muestra TODAS las columnas y se desliza en móvil. El wrapper llena el ancho de su contenedor (width:100%) -ahora que el JS cmClampFormLayout deja el FormLayout padre con ancho firme- y hace scroll horizontal/vertical del excedente; la grilla conserva su ancho natural dentro (una sola tabla, sin comprimir ni apilar el texto). Antes usaba calc(100vw - 56px), que quedaba más angosto que el contenedor y dejaba un hueco a la derecha. */ .cm-page .cm-detalle-wrap { width: 100%; max-width: 100%; box-sizing: border-box; max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; } /* "Pagos Realizados": SOLO scroll horizontal. Quitamos el tope de alto y el scroll vertical interno (que junto al scroll horizontal y la paginación del grid generaba un doble scroll confuso en pantallas muy angostas, p. ej. Galaxy Z Fold 5 plegado a 344px). El contenedor crece a lo alto lo necesario para mostrar todas las filas de la página y el pager completo; el excedente de ancho se sigue recorriendo con scroll horizontal. La grilla "Detalle de Cuotas" (regla genérica de arriba) NO se modifica. */ .cm-page .cm-detalle-wrap--pagos { max-height: none; overflow-y: visible; overflow-x: auto; } /* PAGOS REALIZADOS (tiene SettingsAdaptivity): tabla al 100% + table-layout:fixed para que DevExpress oculte columnas según el espacio disponible. */ .cm-page .cm-detalle-wrap--pagos table.dxgvControl_MetropolisBlue, .cm-page .cm-detalle-wrap--pagos table.dxgvTable_MetropolisBlue { width: 100% !important; table-layout: fixed !important; } /* DETALLE DE CUOTAS (NO tiene adaptividad): ancho NATURAL + table-layout:auto para que la tabla exceda el contenedor y el wrapper (overflow:auto) haga SCROLL horizontal mostrando TODAS las columnas. Con width:100%+fixed quedaba fija al contenedor -> sin desborde -> sin scroll y columnas apretadas. El :not(--pagos) y el 'table' elevan la especificidad para ganar a cualquier regla de ancho fijo. */ .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) table.dxgvControl_MetropolisBlue, .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) table.dxgvTable_MetropolisBlue { width: auto !important; max-width: none !important; table-layout: auto !important; } /* datos Y encabezados en una sola línea -> ancho natural de cada columna (habilita el scroll y evita que los títulos partan palabras y se vea feo) */ .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) .dxgvDataRow_MetropolisBlue td.dxgv, .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) td[class*="dxgvHeader"], .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) td[class*="dxgvHeader"] td { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) td[class*="dxgvHeader"] table { width: auto !important; table-layout: auto !important; } /* CONTENCIÓN del scroll: el wrapper NO debe crecer con la tabla natural. Lo anclamos al ancho de la PANTALLA (100vw - margen) para que el excedente se recorra DENTRO del wrapper y no desborde el margen del celular. Es viewport-anchored porque el FormLayout padre no siempre queda acotado en estos anchos. */ .cm-page .cm-detalle-wrap:not(.cm-detalle-wrap--pagos) { max-width: calc(100vw - 24px) !important; overflow-x: auto !important; } /* menos padding horizontal en las celdas de la grilla para que quepan las columnas */ .cm-page .dxgvDataRow_MetropolisBlue td.dxgv, .cm-page .dxgvHeader_MetropolisBlue { padding-left: 8px !important; padding-right: 8px !important; } /* Botón de detalle adaptativo (los "3 puntos" para expandir las columnas ocultas) y su columna de comando: la regla global .cm-page * { min-width:0 } los colapsaba a 0px y no se veían. Les devolvemos ancho y visibilidad. */ .cm-page td[class*="CommandColumn"], .cm-page td[class*="Adaptive"], .cm-page [class*="dxgvCommandColumn"], .cm-page [class*="dxgvAdaptive"] { min-width: 26px !important; width: auto !important; max-width: none !important; overflow: visible !important; text-align: center !important; } .cm-page [class*="CommandColumn"] img, .cm-page [class*="Adaptive"] img, .cm-page [class*="CommandColumn"] a, .cm-page [class*="CommandColumn"] .dxbButton_MetropolisBlue { min-width: 14px !important; width: auto !important; max-width: none !important; display: inline-block !important; visibility: visible !important; } /* Alinear encabezado y cuerpo en la grilla con scroll vertical ("Detalle de Cuotas"). DevExpress separa encabezado (dxgvHSDC) y cuerpo (dxgvCSD) en tablas distintas y reserva el ancho del scrollbar en el encabezado. En iOS el scrollbar es overlay (0px), por lo que esa reserva desalinea las líneas de columna. Anulamos la reserva del encabezado y el ancho del scrollbar del cuerpo para que ambos usen el mismo ancho (sigue haciendo scroll táctil). */ .cm-page .dxgvHSDC { padding-right: 0 !important; } .cm-page .dxgvCSD { scrollbar-width: none !important; -ms-overflow-style: none !important; } .cm-page .dxgvCSD::-webkit-scrollbar { width: 0 !important; height: 0 !important; } } /* ------------------------------------------- títulos de sección (ex-pestañas) */ .cm-page .cm-section-title { font-weight: 700; font-size: 15px; color: var(--green-800); padding: 10px 0; margin-bottom: 8px; border-bottom: 2px solid var(--green-700); } /* -------------------------------------------------------------- groupbox */ .cm-page .groupbox-border { border: 1px solid var(--green-100) !important; background: var(--green-tint); border-radius: var(--r-md) !important; padding: 14px 16px !important; } .cm-page .groupbox-border legend { font-weight: 700; font-size: 12px; padding: 0 6px; } /* -------------------------------------------------------------- promo banner */ .cm-page .promo-banner { background: linear-gradient(100deg, var(--green-800), var(--green-700)) !important; border-left: none !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-md) !important; padding: 18px 22px !important; } .cm-page .promo-title, .cm-page .promo-text, .cm-page .promo-text span { color: #fff !important; } .cm-page .promo-title { font-size: 16px !important; } /* ------------------------------------------------------------- RoundPanel aviso */ .cm-page .dxrpControl_Material { border: 1px solid var(--line) !important; border-left: 4px solid var(--gold-400) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-sm); } /* ============================================================================ GLOBAL a propósito — popups (DevExpress los mueve al ) y loading panel ============================================================================ */ .popupPatPac .dxpc-mainDiv, .popupPatPac { border-radius: 22px !important; overflow: hidden; box-shadow: 0 12px 40px rgba(16,40,28,.16) !important; } .popupPatPac .dxpc-header { background: linear-gradient(135deg, var(--green-800), var(--green-900)) !important; font-family: var(--ff-serif) !important; } .popup-patpac-title { font-family: var(--ff-serif) !important; color: var(--green-800) !important; } .popup-patpac-badge, .popup-patpac-divider { background-color: var(--gold-400) !important; } .popup-patpac-badge { color: var(--green-900) !important; } .popup-patpac-btn .boldText, .popup-patpac-btn .btn-patpac { width: 100%; } .dxlpLoadingPanel_Material { border-radius: var(--r-md) !important; } /* ============================================================================ v2 — ESTRUCTURA TIPO MOCKUP claude design (clases .cm-, propias de la página) ============================================================================ */ /* ----- Tarjeta genérica + encabezado con ícono ----- */ .cm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; margin: 0 auto 22px auto; max-width: 1080px; box-sizing: border-box; } .cm-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .cm-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--green-50); color: var(--green-800); display: flex; align-items: center; justify-content: center; font-size: 20px; } .cm-card-titles { display: flex; flex-direction: column; min-width: 0; } .cm-card-title { font-weight: 700; font-size: 17px; color: var(--ink-900); line-height: 1.2; } .cm-card-sub { font-size: 13.5px; color: var(--ink-600); margin-top: 2px; } /* ----- Mosaico de datos del cliente ----- */ .cm-cliente-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .cm-cliente-name { font-family: var(--ff-serif); font-size: 26px; font-weight: 600; color: var(--green-800); line-height: 1.15; } .cm-cliente-sub { font-size: 14px; color: var(--ink-600); margin-top: 4px; } .cm-contrato-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; color: var(--ink-700); font-weight: 600; white-space: nowrap; } .cm-contrato-pill b { color: var(--green-800); } .cm-contrato-pill i { color: var(--green-700); font-size: 16px; } .cm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .cm-tile { background: #fff; padding: 16px 18px; min-height: 62px; } .cm-tile-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px; } .cm-tile-value { font-size: 18px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; } .cm-tile-value, .cm-tile-value * { color: var(--ink-900); } .cm-tile-deuda { background: var(--green-800); } .cm-tile-deuda .cm-tile-label { color: rgba(255,255,255,.75) !important; } .cm-tile-deuda .cm-tile-value, .cm-tile-deuda .cm-tile-value * { color: #fff !important; } .cm-tile-wide { grid-column: span 2; } @media (max-width: 800px) { .cm-tiles { grid-template-columns: repeat(2, 1fr); } .cm-tile-wide { grid-column: span 1; } } @media (max-width: 520px) { .cm-tiles { grid-template-columns: 1fr; } } /* ----- Insignias de estado en la grilla de cuotas ----- */ .badge-cuota { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.4; } .badge-cuota::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-vencida { background: #fdecea; color: #c0392b; } .badge-pendiente { background: var(--gold-50); color: var(--gold-600); } .badge-pagada { background: var(--green-50); color: var(--green-700); } /* ----- Botones de pago tipo barra (Servipag / Webpay) ----- */ .cm-pay-wrap { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .cm-pay-wrap .boldText { width: 250px !important; height: auto !important; min-height: 64px; display: inline-flex !important; align-items: center; justify-content: center; padding: 12px 18px !important; } .cm-pay-note { text-align: center; font-size: 12.5px; color: var(--ink-600); margin-top: 14px; } /* ----- Tarjeta PAT/PAC grande ----- */ .cm-patpac { background: linear-gradient(135deg, var(--green-800), var(--green-900)); border-radius: var(--r-lg); padding: 26px 28px; color: #fff; box-shadow: var(--shadow-md); } .cm-patpac-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-400); color: var(--green-900); font-weight: 700; font-size: 12px; letter-spacing: .4px; padding: 5px 13px; border-radius: var(--r-pill); margin-bottom: 14px; } .cm-patpac-title { font-family: var(--ff-serif); font-size: 24px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; color: #fff; } .cm-patpac-text { font-size: 14.5px; color: rgba(255,255,255,.9); max-width: 60ch; margin-bottom: 16px; } .cm-patpac-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; } .cm-patpac-list li { font-size: 14px; color: rgba(255,255,255,.92); display: flex; align-items: center; gap: 9px; } .cm-patpac-list li::before { content: "✓"; color: var(--gold-400); font-weight: 800; } /* botón de la tarjeta PAT/PAC en dorado (sobre fondo verde) y alineado a la izq. */ .cm-patpac .btn-center { display: block; } .cm-patpac .btn-patpac { background-color: var(--gold-400) !important; color: var(--green-900) !important; } /* La letra y el ícono del botón "Activar pago automático" toman el mismo verde del badge "Beneficio exclusivo" (--green-900). Se apunta también a los elementos internos que DevExpress genera (span/ícono), porque el tema y el