@charset "UTF-8"; /* * Tema compartido de las pantallas pre-login: login, olvido-contrasena y * olvido-contrasena-tel. * * Portado del diseño de Docugate BPM (Login.template.scss + Footer.organism.scss). * Antes cada una de esas tres carpetas tenía su propia copia de css/login.css con * el fondo #555555 escrito a mano; ahora las tres enlazan este archivo y el color * llega por --login-bg, que PHP sobreescribe con el parámetro `login_bg`. */ @font-face { font-family: "Poppins"; src: url("../Poppins/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../Poppins/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../Poppins/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../Poppins/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; } :root { /* Los valores reales los inyecta PHP en el de cada vista, leidos de la tabla `parametros`. Lo de aqui es solo el respaldo si falta la fila. */ --login-bg: #2b2b2b; --login-title: #ffffff; --login-help: #d1d1d1; --login-foot: #999999; --login-icon: #9a9a9a; --login-input-bg: #1f1f1f; --login-input-bd: #3f3f3f; --login-input-tx: #ffffff; --login-btn-bg: #006cd8; --login-btn-tx: #ffffff; --login-pid-bd: #ff6b35; --login-pid-tx: #ff6b35; --login-back-tx: #ffffff; /* Las lineas finas siguen al color de los titulos en vez de ser blancas fijas: asi un fondo claro no las deja invisibles. El rgba de delante es el respaldo para navegadores sin color-mix. */ --login-hairline: rgba(255, 255, 255, 0.15); --login-hairline: color-mix(in srgb, var(--login-title) 18%, transparent); --login-form-width: 26rem; --login-field-height: 3rem; } body { margin: 0; font-family: "Poppins", "Segoe UI", Arial, sans-serif; font-weight: 400; background-color: var(--login-bg); color: #fff; } /* ---------------------------------------------------------------- Shell -- */ .login__wrapper { display: flex; flex-direction: column; /* `dvh` descuenta la barra de direcciones del navegador móvil, que con `vh` dejaba el botón de acceso por debajo del borde visible. */ min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 1rem; align-items: center; background-color: var(--login-bg); } .login__wrapper__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; max-height: 3rem; } .login__wrapper__header__img { object-fit: contain; width: 15rem; height: auto; } .login__wrapper__content { padding: 1rem; width: 100%; max-width: 72rem; box-sizing: border-box; display: flex; /* Dos columnas: marca a la izquierda, acceso a la derecha. */ flex-direction: row; justify-content: center; align-items: center; gap: 3rem; flex-grow: 1; z-index: 0; } /* Las dos columnas de `.login__wrapper__content`. */ .login__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; /* El tope va en la base, no sólo en la columna del formulario: si únicamente se limita una, la otra absorbe todo el espacio sobrante y el conjunto queda descentrado respecto a la página. */ flex: 1 1 0; max-width: var(--login-form-width); min-width: 0; /* Imprescindible junto al max-width: al apilarse las columnas el contenedor pasa a `column`, donde `flex: 1 1 0` ya no gobierna el ancho y el panel tomaba sus 26rem naturales — más que un móvil de 390px, que se desbordaba por la derecha. */ width: 100%; box-sizing: border-box; gap: 1.5rem; } .login__panel--brand { text-align: center; gap: 1rem; } .login__panel--form { gap: 1.25rem; /* El contenido se alinea a lo ancho de una columna estrecha, en vez de centrarse elemento a elemento. */ align-items: stretch; } .login__panel__door { width: 100%; max-width: 30rem; object-fit: contain; } .login__panel__title { color: var(--login-title); font-size: 1.6rem; font-weight: 400; margin: 0; } .login__panel__subtitle { color: var(--login-help); font-size: 1rem; max-width: 22rem; margin: 0; } .login__divider { width: 1px; /* `center` y altura fija, no `stretch`: estirado se pegaba al borde superior de la fila en vez de quedar centrado frente a las dos columnas. */ align-self: center; height: 26rem; flex: none; background-color: var(--login-hairline); } /* Encabezado de la columna de acceso. */ .login__form-header { width: 100%; } .login__form-header__title { color: var(--login-title); font-size: 1.4rem; font-weight: 600; margin: 0; } /* ------------------------------------------------------------ Formulario -- */ .login__form { width: 100%; max-width: var(--login-form-width); margin: 0; display: grid; grid-template-columns: 1fr; justify-items: stretch; align-items: center; gap: 1rem; } /* Etiqueta + campo. */ .login__field-group { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; } .login__field-group__label { color: var(--login-title); font-size: 0.825rem; font-weight: 500; } /* * Campo con icono decorativo delante. * * Los selectores cuelgan de `.login__field` a propósito y NO de `input[type=text]` * a secas: el modal de verificación OTP se inyecta en `.modal` sobre fondo blanco * y con la regla global heredaba el campo oscuro, quedando texto negro sobre * fondo negro. */ .login__field { position: relative; display: block; width: 100%; } .login__field__icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 1.15rem; height: 1.15rem; color: var(--login-icon); pointer-events: none; z-index: 2; } .login__field input { box-sizing: border-box; width: 100%; height: var(--login-field-height); /* Hueco para que el icono no se solape con lo que se escribe. */ padding: 0 1rem 0 2.6rem; background-color: var(--login-input-bg); border: 1px solid var(--login-input-bd); border-radius: 0; color: var(--login-input-tx); font-family: inherit; font-size: 0.825rem; } .login__field input::placeholder { color: var(--login-icon); font-style: normal; } .login__field input:focus { border-color: var(--login-btn-bg); outline: none; } /* Deja sitio al ojo de mostrar/ocultar. */ .login__field--password input { padding-right: 3rem; } .login__field__toggle { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--login-icon); cursor: pointer; z-index: 2; -webkit-user-select: none; user-select: none; } .login__field__toggle:hover { color: var(--login-title); } .login__button { height: var(--login-field-height); width: 100%; box-sizing: border-box; background-color: var(--login-btn-bg); color: var(--login-btn-tx); border: none; border-radius: 0; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 500; } .login__button:hover { /* Aclara el color configurado en vez de saltar a un azul fijo. */ filter: brightness(1.15); } .login__button:disabled { opacity: 0.6; cursor: not-allowed; } /* * Acceso con Portal-ID: boton secundario de contorno, bajo el de ingresar. * No compite con el principal porque saca al usuario de la aplicacion. */ .login__button--outline { display: flex; align-items: center; justify-content: center; gap: 0.7rem; background-color: var(--login-pid-bg, transparent); border: 1px solid var(--login-pid-bd); color: var(--login-pid-tx); text-decoration: none; } .login__button--outline:hover { /* Sin filter: sobre fondo transparente no se nota. Un velo del propio color del borde si, y funciona con cualquier color configurado. */ background-color: var(--login-pid-bg, color-mix(in srgb, var(--login-pid-bd) 12%, transparent)); filter: brightness(1.15); } /* El icono hereda el color del texto del boton, asi acompana al que se configure en lugar de quedarse blanco fijo. */ .login__button--outline svg { width: 1.15rem; height: 1.15rem; flex: none; fill: currentColor; } /* Linea con un punto al centro, entre el acceso normal y el de Portal-ID. */ /* * Volver al inicio de sesion. Antes era un enlace suelto: como boton de * contorno mantiene el peso visual de una accion secundaria y, sobre todo, * permite configurar su borde ademas de su texto. */ .login__button--back { display: flex; align-items: center; justify-content: center; gap: 0.7rem; background-color: var(--login-back-bg, transparent); border: 1px solid var(--login-back-bd, rgba(255, 255, 255, 0.25)); color: var(--login-back-tx); text-decoration: none; } .login__button--back:hover { background-color: var(--login-back-bg, color-mix(in srgb, var(--login-back-tx) 10%, transparent)); filter: brightness(1.15); } .login__separator { position: relative; display: block; width: 100%; height: 1px; background-color: var(--login-hairline); } .login__separator::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid var(--login-hairline); /* Tapa la linea por detras del punto, asi que sigue al color del fondo. */ background-color: var(--login-bg); } .login__note { color: var(--login-help); font-size: 0.825rem; line-height: 1.5; text-align: justify; margin: 0; } .login__link { font-size: 0.825rem; color: var(--login-help); text-decoration: none; cursor: pointer; margin: 0; } .login__link:hover { color: var(--login-title); text-decoration: underline; } /* ----------------------------------------------------------- Pie común --- */ .login__footer { width: 100%; max-width: 105rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; color: var(--login-foot); padding-inline: 1.6rem; flex: 0 0 auto; } .login__footer__content { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding: 0.5rem 0; } .login__footer__content hr { width: 1px; height: 4.5rem; margin: 0; border: none; background-color: rgba(255, 255, 255, 0.5); background-color: color-mix(in srgb, var(--login-foot) 65%, transparent); flex: none; } .login__footer__section { text-align: center; width: 100%; } .login__footer__section h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 0.25rem; } .login__footer__section--badge { display: flex; align-items: center; justify-content: center; } .login__footer__badge { height: 4rem; width: auto; object-fit: contain; } .login__footer__section__container { display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.5rem; } .login__footer__section__container img { width: 20px; object-fit: contain; } .login__footer__section__container a { color: inherit; text-decoration: none; font-size: 0.7rem; } .login__footer__section__container a:hover { color: var(--login-title); } .login__footer__copyright { width: 100%; text-align: center; } .login__footer__copyright p { font-size: 0.7rem; margin: 0.25rem 0 0; } /* ------------------------------------------------- Modal de verificación -- */ /* * El modal OTP (login/modal.php) se inyecta en `.modal` y va sobre fondo BLANCO. * Antes tomaba prestados el borde y el botón azul de las reglas globales * `input[type=text]` / `button` del viejo login.css. Como aquí esas reglas están * acotadas al login (para no ennegrecer el campo del código), el modal necesita * las suyas propias. */ .window input[type="text"] { box-sizing: border-box; width: 100%; height: 3.125rem; padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; border-radius: 0; font-family: inherit; font-size: 1rem; color: #000; background-color: #fff; } .window button { background-color: var(--login-btn-bg); color: var(--login-btn-tx); border: none; border-radius: 0; cursor: pointer; font-family: inherit; font-size: 1rem; } .window button:hover { filter: brightness(1.15); } .window a { color: #007bff; } /* --------------------------------------------------------- Responsive ---- */ /* PORTÁTIL (< 1400px): el pie se comprime para no comerse el formulario. */ @media (max-width: 1399px) { .login__footer__badge { height: 2.25rem; } .login__footer__section h3 { font-size: 0.75rem; } .login__footer__section__container img { width: 0.9rem; } } /* TABLET Y MENOS (< 1024px): las dos columnas no caben sin estrangular el formulario, así que se apilan y el divisor pasa a ser horizontal. */ @media (max-width: 1023px) { .login__wrapper__content { flex-direction: column; gap: 1.5rem; } .login__divider { width: 100%; height: 1px; } .login__footer__section__container { flex-wrap: wrap; } } /* MÓVIL (< 768px) */ @media (max-width: 767px) { .login__wrapper { padding: 0.75rem; } /* El logo (15rem) más el resto no caben en 360px en una sola línea. */ .login__wrapper__header { max-height: none; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .login__wrapper__header__img { width: 100%; max-width: 11rem; } .login__wrapper__content { padding: 0.5rem; } /* El panel de marca empujaba el botón de acceso fuera de la pantalla. */ .login__panel--brand { display: none; } .login__divider { display: none; } .login__footer { padding-inline: 0.75rem; } .login__footer__content { /* Se mantienen en fila y se deja que envuelvan: apilarlas en columna daba tres filas y un pie de ~7rem que en un móvil se come el contenido. */ flex-wrap: wrap; justify-content: center; gap: 0.15rem 1rem; padding: 0.25rem 0; } /* Los separadores verticales no tienen sentido con las secciones envueltas. */ .login__footer__content hr { display: none; } .login__footer__section { width: auto; } /* El nombre de la filial es redundante junto al correo, que ya lleva el dominio del país. */ .login__footer__section h3 { display: none; } }