/* CM SoftLutions - Todos los derechos reservados. -------------------------------------------------------------------------- NOMBRE ARCHIVO : PaymentDetail.css CREADO POR : (JACARVAJAL) John Alexander Carvajal Salazar FECHA CREACION : 2026/08/06 -------------------------------------------------------------------------- DESCRIPCION : Estilos de la pantalla de comprobante "Payment Detail" (PaymentDetail.razor), la vista que recibe el callback "URL de Retorno" de TuCompra (PBI 24958 / Task 24964/24966). -------------------------------------------------------------------------- */ /* Estilos de la pantalla "Detalle de pago" (PBI 24958 / Task 24964/24966). Layout con CSS Grid + grid-template-areas: en móvil apila hero/body/actions; en escritorio (>=53.75em) hero ocupa la columna izquierda (dos filas) y body/actions quedan en la columna derecha, uno debajo del otro — igual que el handoff de diseño original (los botones viven DENTRO de la columna blanca, no como una tercera columna aparte). Unidades: rem para tipografía/espaciado (escalan con el tamaño de fuente del navegador, a diferencia de px) y % para el ancho de la columna del hero (proporcional a la tarjeta en vez de un valor fijo). Se dejan en px solo los grosores de borde/línea de 1px (hairlines): no deben cambiar con el zoom de texto o se ven borrosos. Base de cálculo: 1rem = 16px. */ /* min-height:100vh (no solo height:auto por contenido): la etiqueta real del host (blanca) queda visible detrás si este div no llena el viewport completo. display:flex + align-items/justify-content:center centra la tarjeta en el viewport cuando sobra espacio; si el contenido es más alto que el viewport, el contenedor simplemente crece y no hay nada que centrar (no se corta ni se descuadra). */ .cms-pgr-body { margin:0; min-height:100vh; box-sizing:border-box; background:#E8E8E6; font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; padding:1.5rem; display:flex; align-items:center; justify-content:center; } .cms-pgr-receipt { max-width:26.25rem; width:100%; background:#FFFFFF; border-radius:1.5rem; overflow:hidden; box-shadow:0 1.5rem 3.75rem rgba(12,12,13,0.10); display:grid; grid-template-columns:1fr; grid-template-areas: "hero" "body" "actions"; } .cms-pgr-hero { grid-area:hero; background:#0C0C0D; padding:1.375rem 1.625rem 1.625rem; display:flex; flex-direction:column; gap:1.375rem; } .cms-pgr-hero-top { display:flex; align-items:center; justify-content:space-between; } .cms-pgr-logo-chip { display:inline-flex; background:#FFFFFF; padding:0.4375rem 0.75rem; border-radius:0.625rem; } .cms-pgr-logo-chip img { height:1.375rem; width:auto; display:block; } .cms-pgr-comprobante-label { font-size:0.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#8B8B8A; } .cms-pgr-badge { display:inline-flex; align-self:flex-start; align-items:center; gap:0.5rem; background:#EDEDEB; color:#0C0C0D; padding:0.375rem 0.875rem; border-radius:999px; font-size:0.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } /* Color por defecto - no debería verse: PaymentDetail.razor.cs siempre agrega una de las 3 clases de abajo, una por cada valor de ColorBadge. */ .cms-pgr-badge.verde { background:#4ADE80; } /* ColorBadge.Verde: aprobada */ .cms-pgr-badge.amarillo { background:#FBD51F; } /* ColorBadge.Amarillo: pendiente */ .cms-pgr-badge.rojo { background:#F87171; } /* ColorBadge.Rojo: rechazada o abortada */ .cms-pgr-amount-row { display:flex; align-items:baseline; gap:0.5rem; } .cms-pgr-amount { font-size:2.75rem; font-weight:800; color:#FFFFFF; letter-spacing:-.02em; } .cms-pgr-currency { font-size:0.9375rem; font-weight:600; color:#8B8B8A; } .cms-pgr-timestamp { font-size:0.8125rem; color:#8B8B8A; } .cms-pgr-divider { height:1px; background:#EDEDEB; } .cms-pgr-hero .cms-pgr-divider { background:#242425; } .cms-pgr-section-label { font-size:0.6875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9A9A98; } .cms-pgr-hero .cms-pgr-section-label { color:#6E6E6C; } .cms-pgr-desc-block, .cms-pgr-resumen-block { display:flex; flex-direction:column; gap:0.6875rem; } .cms-pgr-desc-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .cms-pgr-desc-title { font-size:1rem; font-weight:700; color:#0C0C0D; } .cms-pgr-desc-sub { font-size:0.8125rem; color:#7A7A78; } .cms-pgr-hero .cms-pgr-desc-title, .cms-pgr-hero .cms-pgr-desc-sub { color:#FFFFFF; } .cms-pgr-hero .cms-pgr-desc-sub { color:#8B8B8A; } .cms-pgr-kv-row { display:flex; justify-content:space-between; gap:1rem; font-size:0.875rem; } .cms-pgr-kv-row .k { color:#6E6E6C; } .cms-pgr-kv-row .v { color:#0C0C0D; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; } .cms-pgr-hero .cms-pgr-kv-row .k { color:#8B8B8A; } .cms-pgr-hero .cms-pgr-kv-row .v { color:#FFFFFF; } .cms-pgr-total-row { display:flex; justify-content:space-between; gap:1rem; padding-top:0.6875rem; border-top:1px solid #EDEDEB; font-size:0.9375rem; } .cms-pgr-total-row .k, .cms-pgr-total-row .v { color:#0C0C0D; font-weight:800; font-variant-numeric:tabular-nums; } .cms-pgr-hero .cms-pgr-total-row { border-top:1px solid #242425; } .cms-pgr-hero .cms-pgr-total-row .k, .cms-pgr-hero .cms-pgr-total-row .v { color:#FBD51F; } .cms-pgr-body-white { grid-area:body; padding:1.5rem 1.625rem 0.5rem; display:flex; flex-direction:column; gap:1.375rem; background:#FFFFFF; } .cms-pgr-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; } .cms-pgr-details-grid .kv-col { display:flex; flex-direction:column; gap:0.1875rem; } .cms-pgr-details-grid .k { font-size:0.75rem; color:#8A8A88; } .cms-pgr-details-grid .v { font-size:0.875rem; font-weight:600; color:#0C0C0D; text-align:left; font-variant-numeric:tabular-nums; } .cms-pgr-processed-by { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding-top:0.625rem; } .cms-pgr-processed-by span { font-size:0.6875rem; color:#9A9A98; } .cms-pgr-processed-by img { height:1rem; width:auto; display:block; opacity:.85; } /* justify-content:flex-end (no align-self:end en el grid del escritorio): así el fondo blanco de este bloque llena toda su fila y los botones quedan pegados abajo, sin dejar ver el fondo gris de .cms-pgr-receipt por debajo (ver fix de grid-template-rows más abajo). */ .cms-pgr-actions { grid-area:actions; padding:1.5rem 1.625rem 1.625rem; display:flex; flex-direction:column; gap:0.75rem; background:#FFFFFF; justify-content:flex-end; } .cms-pgr-btn { height:3.25rem; border:none; border-radius:0.875rem; font-family:inherit; font-size:0.9375rem; cursor:pointer; width:100%; } .cms-pgr-btn-primary { background:#FBD51F; color:#0C0C0D; font-weight:800; } .cms-pgr-btn-primary:hover { background:#E9C40F; } .cms-pgr-btn-secondary { background:#FFFFFF; color:#0C0C0D; font-weight:700; border:1px solid #DEDEDC; } .cms-pgr-btn-secondary:hover { background:#F2F2F2; } @media print { .cms-pgr-actions { display:none; } .cms-pgr-receipt { box-shadow:none; } .cms-pgr-body { background:#FFFFFF; padding:0; min-height:0; } /* Por defecto el navegador no imprime fondos/colores (ahorro de tinta) — sin esto el comprobante impreso pierde el negro del hero, el amarillo del badge/total, etc. */ * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; } } @media (min-width:53.75em) { .cms-pgr-body { padding:3rem; } .cms-pgr-receipt { max-width:67.5rem; background:#E6E6E4; grid-template-columns:37% 1fr; grid-template-rows:1fr auto; grid-template-areas: "hero body" "hero actions"; /* Solo separación entre columnas (hero negro vs. columna blanca). Sin row-gap: body y actions son ambos blancos y deben verse como un solo bloque continuo — un row-gap acá dejaría ver esta línea gris entre ambos. */ column-gap:1px; row-gap:0; } .cms-pgr-hero { padding:2.75rem 2.25rem; gap:2rem; } .cms-pgr-amount { font-size:3.25rem; } .cms-pgr-body-white { padding:2.75rem 2.5rem 0; } .cms-pgr-actions { flex-direction:row; padding:0 2.5rem 2.75rem; } }