/* ========================================================= LOGIN CANCIONERO - SMOOTH SAFE GeneXus + K2BTools IMPORTANTE: No se condiciona el BODY con :has(). En navegación Smooth GeneXus puede conservar elementos anteriores ocultos en el DOM. Las reglas se aplican SOLAMENTE al contenedor que contiene realmente los controles #vINTEGRANTE y #vPASSWORD. ========================================================= */ /* ========================================================= 1. CONTENEDOR DE PANTALLA DEL LOGIN El fondo se coloca en el PromptMainTable que contiene el login, NO en BODY. ========================================================= */ #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) { width: 100% !important; min-height: 100vh !important; margin: 0 !important; padding: 32px 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background-color: #eef4ff !important; background-image: linear-gradient( rgba(245, 248, 255, 0.10), rgba(245, 248, 255, 0.10) ), url("Fondo.png") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; } /* ========================================================= 2. ESTRUCTURA EXTERIOR DEL LOGIN ========================================================= */ #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) > .row { width: 100% !important; margin: 0 !important; } #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) > .row > .col-xs-12 { padding: 0 !important; } #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) .gx-content-placeholder, #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) .gx-ct-body { width: 100% !important; } /* ========================================================= 3. TARJETA DEL LOGIN MUY IMPORTANTE: Solo el #MAINTABLE que contiene los dos campos del login. ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) { position: relative !important; width: 100% !important; max-width: 440px !important; margin: 0 auto !important; padding: 36px 38px 34px !important; display: flex !important; flex-direction: column !important; background: rgba(255, 255, 255, 0.94) !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; border-top: 5px solid #5268e8 !important; border-radius: 24px !important; box-shadow: 0 28px 70px rgba(34, 51, 84, 0.16), 0 10px 30px rgba(62, 81, 140, 0.10) !important; overflow: hidden !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-sizing: border-box !important; } /* ========================================================= 4. LOGO ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::before { content: "" !important; display: block !important; width: 100% !important; height: 128px !important; margin: 0 auto 16px auto !important; background-image: url("logo.png") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; flex: 0 0 auto !important; order: -10 !important; } /* ========================================================= 5. SUBTÍTULO ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::after { content: "Ingresá con tu usuario y contraseña" !important; display: block !important; margin: -2px 0 26px 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important; color: #718096 !important; order: -9 !important; } /* ========================================================= 6. FILAS DEL LOGIN ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) > .row { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; order: 0 !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) > .row > .col-xs-12 { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= 7. CONTENEDORES K2B - SOLO DENTRO DEL LOGIN ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #CONTENTTABLE, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES_CONTENT, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES1_CONTENT, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTESCONTAINERTABLE_ATTRIBUTES, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTESCONTAINERTABLE_ATTRIBUTES1 { width: 100% !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsTable_ComponentContainer { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BT_ComponentTitleContainer { display: none !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BT_ComponentContent { padding: 0 !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsTable_TabularContentContainer, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsTable_TopAttributeContainer, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BT_NGA { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ========================================================= 8. BOOTSTRAP - SOLO LOGIN ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #CONTENTTABLE > .row, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES_CONTENT > .row, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES1_CONTENT > .row, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsTable_TabularContentContainer > .row { margin-left: 0 !important; margin-right: 0 !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #CONTENTTABLE .col-xs-12, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES_CONTENT .col-xs-12, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) #ATTRIBUTES1_CONTENT .col-xs-12 { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= 9. FORM GROUPS ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .gx-default-form-group { margin-bottom: 20px !important; } /* ========================================================= 10. LABELS ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_TrnLabel { display: block !important; width: 100% !important; margin: 0 0 8px 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #44516a !important; text-align: left !important; } /* ========================================================= 11. INPUTS ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn { display: block !important; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 12px 15px !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #152033 !important; background-color: rgba(255, 255, 255, 0.98) !important; background-image: none !important; border: 1px solid #d5dceb !important; border-radius: 12px !important; outline: none !important; box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02), 0 1px 2px rgba(15, 23, 42, 0.02) !important; box-sizing: border-box !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn:hover { border-color: #aebad0 !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn:focus { background-color: #ffffff !important; border-color: #596fe8 !important; box-shadow: 0 0 0 4px rgba(89, 111, 232, 0.13) !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn::placeholder { color: #9aa6ba !important; } /* ========================================================= 12. BOTÓN INGRESAR ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction { width: 100% !important; min-height: 50px !important; margin-top: 6px !important; padding: 12px 18px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #ffffff !important; background: linear-gradient( 135deg, #2776e8 0%, #5466e8 48%, #744fe2 100% ) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 10px 22px rgba(76, 91, 210, 0.25) !important; cursor: pointer !important; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction:hover, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction:focus { color: #ffffff !important; filter: brightness(1.045) !important; box-shadow: 0 14px 28px rgba(76, 91, 210, 0.31) !important; outline: none !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction:active { transform: translateY(1px) !important; box-shadow: 0 6px 15px rgba(76, 91, 210, 0.24) !important; } /* ========================================================= 13. ERROR VIEWER Se mantiene en el DOM para que K2BTools pueda leer el mensaje y mostrar el popup, pero se oculta visualmente. ========================================================= */ #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .ErrorViewer.gx_ev { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: none !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* ========================================================= 14. RESPONSIVE ========================================================= */ @media (max-width: 767px) { #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) { padding: 18px 14px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) { max-width: 100% !important; padding: 28px 24px 26px 24px !important; border-radius: 20px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::before { height: 105px !important; margin-bottom: 12px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::after { margin-bottom: 23px !important; font-size: 13px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction { min-height: 50px !important; font-size: 16px !important; } } @media (max-width: 420px) { #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) { padding: 10px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) { padding: 24px 18px 22px 18px !important; border-radius: 17px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::before { height: 88px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::after { font-size: 12.5px !important; margin-bottom: 20px !important; } } @media (max-height: 650px) { #MAINTABLE_MPAGE.PromptMainTable:has(#vINTEGRANTE):has(#vPASSWORD) { align-items: flex-start !important; padding-top: 15px !important; padding-bottom: 15px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) { padding-top: 22px !important; padding-bottom: 22px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::before { height: 82px !important; margin-bottom: 8px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD)::after { margin-bottom: 16px !important; } #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .gx-default-form-group { margin-bottom: 15px !important; } } /* ========================================================= 15. REDUCIR MOVIMIENTO ========================================================= */ @media (prefers-reduced-motion: reduce) { #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .Attribute_Trn, #MAINTABLE:has(#vINTEGRANTE):has(#vPASSWORD) .K2BToolsButton_MainAction { transition: none !important; } }