/* ============================================================================= Login Todo cuelga de #extr-page, que es el id del de Login.aspx y no se usa en ninguna otra pagina. Asi esta hoja no puede alcanzar al resto de la aplicacion, que comparte your_style.css con el login. Sobre Bootstrap 4.6.2, el mismo que carga Admin.Master. ============================================================================= */ #extr-page { --verde: #30c976; --verde-oscuro: #22a86c; --tinta: #212529; --tenue: #6c757d; } #extr-page, #extr-page body { height: 100%; } /* La imagen pasa a cubrir toda la ventana, no solo la mitad izquierda: es lo que permite que la tarjeta de la derecha se vea translucida sobre algo. */ #extr-page body { margin: 0; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--tinta); background: #1c1c1c url(../img/f_login1.jpg) center / cover no-repeat fixed; } /* Velo oscuro. Sin el, el texto blanco de la izquierda pierde contraste segun la zona de la foto, y la tarjeta de la derecha no despega del fondo. */ #extr-page body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(105deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .35) 100%); z-index: 0; } /* El fondo sigue cubriendo toda la ventana, pero el contenido se limita y se centra. Sin este tope, en un monitor ancho la columna derecha empuja la tarjeta contra el borde: medido en una ventana de 1481px, el centro de la tarjeta caia al 79% del ancho, con un vacio enorme en el medio. */ #extr-page .login-wrap { position: relative; z-index: 1; min-height: 100vh; max-width: 1280px; margin: 0 auto; } /* ---------- Lado izquierdo: el mensaje ---------- */ #extr-page .login-marca { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: 4rem 3rem; color: #fff; } #extr-page .login-marca-titulo { max-width: 460px; margin-bottom: 1.5rem; } #extr-page .login-marca-texto { max-width: 460px; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .85); } #extr-page .login-marca-texto a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .45); text-decoration: none; transition: border-color .2s ease; } #extr-page .login-marca-texto a:hover { border-bottom-color: #fff; } /* ---------- Lado derecho: la tarjeta y el pie ---------- */ /* Columna: la tarjeta ocupa el espacio libre y queda centrada, y el logo se apoya abajo del todo. */ #extr-page .login-panel { display: flex; flex-direction: column; min-height: 100vh; padding: 2rem 1.25rem 1.5rem; } #extr-page .login-panel-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } #extr-page .login-footer { flex: 0 0 auto; padding-top: 1.75rem; text-align: center; } #extr-page .login-footer-logo { width: 99px; height: 35px; opacity: .75; transition: opacity .2s ease; } #extr-page .login-footer-logo:hover { opacity: 1; } #extr-page .login-card { width: 100%; max-width: 460px; padding: 2.5rem; border-radius: 14px; /* El translucido: color de respaldo primero, y el desenfoque encima para los navegadores que lo soportan. Sin backdrop-filter se sigue viendo bien, solo que menos vidrioso. */ background: rgba(255, 255, 255, .93); border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { #extr-page .login-card { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } } /* h1 en your_style.css es verde y de 60px. Aqui manda otra cosa. */ #extr-page .login-card h1 { margin: 0 0 .35rem; font-size: 1.875rem; font-weight: 700; color: var(--tinta); letter-spacing: -.02em; } #extr-page .login-card .login-bajada { margin-bottom: 1.75rem; font-size: .875rem; line-height: 1.5; color: var(--tenue); } /* ---------- Campos ---------- */ #extr-page .login-card label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); } #extr-page .login-card .form-control { height: auto; padding: .7rem .875rem; font-size: .9375rem; color: var(--tinta); background-color: rgba(255, 255, 255, .75); border: 1px solid #ced4da; border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } #extr-page .login-card .form-control:focus { background-color: #fff; border-color: var(--verde); box-shadow: 0 0 0 .2rem rgba(48, 201, 118, .25); outline: 0; } #extr-page .login-card .form-control::placeholder { color: #adb5bd; } /* ---------- Terminos ---------- */ #extr-page .login-terminos { margin: 1.25rem 0 1.5rem; font-size: .8125rem; color: var(--tenue); } #extr-page .login-terminos .custom-control-label { /* Anula el label en mayusculas de los campos. */ margin-bottom: 0; font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tenue); cursor: pointer; } #extr-page .login-terminos .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--verde); border-color: var(--verde); } #extr-page .login-terminos .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(48, 201, 118, .25); } /* ---------- Boton ---------- */ #extr-page .login-card .btn-ingresar { width: 100%; padding: .75rem 1rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; color: #fff; background-color: var(--verde); border: 1px solid var(--verde); border-radius: 8px; transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; } #extr-page .login-card .btn-ingresar:hover, #extr-page .login-card .btn-ingresar:focus { color: #fff; background-color: var(--verde-oscuro); border-color: var(--verde-oscuro); box-shadow: 0 6px 18px rgba(34, 168, 108, .35); } #extr-page .login-card .btn-ingresar:active { transform: translateY(1px); } /* ---------- Mensajes ---------- */ /* El aviso solo ocupa espacio cuando el servidor escribio algo. Sin esto queda un hueco permanente, que es lo que pasaba con el separador de 100px. */ #extr-page .login-aviso:empty, #extr-page .login-aviso span:empty { display: none; } #extr-page .login-aviso { display: block; margin-bottom: 1.25rem; padding: .75rem .875rem; font-size: .8125rem; line-height: 1.45; color: #842029; background-color: rgba(248, 215, 218, .9); border: 1px solid #f5c2c7; border-radius: 8px; } #extr-page .login-aviso ul { margin: 0; padding-left: 1.1rem; } #extr-page .login-pie { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0, 0, 0, .08); font-size: .75rem; line-height: 1.5; color: #8a9099; } /* ---------- Pantallas chicas ---------- */ @media (max-width: 767.98px) { #extr-page .login-panel { min-height: 100vh; padding: 1.5rem 1rem; } #extr-page .login-card { padding: 1.75rem 1.35rem; } #extr-page .login-card h1 { font-size: 1.625rem; } }