/* Login moderno marca blanca - SIAG */
/*
* Las variables de marca (--siag-login-brand y hermanas) las escribe
* estiloMarcaBlancaAcceso() en el atributo style del . Los valores de
* aqui son solo el respaldo si la hoja se usa sin ese helper.
*/
:root {
--siag-login-brand: #4888be;
--siag-login-brand-dark: #24577e;
--siag-login-brand-rgb: 72, 136, 190;
--siag-login-brand-btn: #33628a;
--siag-login-on-brand: #ffffff;
--siag-login-on-brand-soft: rgba(255, 255, 255, .88);
--siag-login-hero-overlay-start: .1;
--siag-login-hero-overlay-end: .28;
--siag-login-text: #172033;
--siag-login-muted: #607086;
--siag-login-border: #d8dee8;
--siag-login-soft: #f5f7fb;
--siag-login-panel: #ffffff;
--siag-login-danger: #b3352f;
--siag-login-success: #2f7d4f;
--siag-login-radio: 8px;
/* Ancho unico de todos los logos de marca: la altura la marca cada uno */
--siag-login-logo-ancho: 300px;
}
body.login.siag-login-modern-body {
background: #eef1f5;
color: var(--siag-login-text);
min-height: 100vh;
}
.siag-login-page {
display: grid;
/* El formulario nunca baja de 460px: entre 992 y 1200 quedaba apretado */
grid-template-columns: minmax(320px, 1fr) minmax(460px, .9fr);
min-height: 100vh;
}
/*
* La capa oscura no es fija: su opacidad la calcula el helper a partir de la
* luminancia del color de marca, para que el texto siga legible tanto sobre un
* morado oscuro como sobre un verde lima.
*/
.siag-login-hero {
align-items: center;
background:
linear-gradient(135deg,
rgba(0, 0, 0, var(--siag-login-hero-overlay-start)),
rgba(0, 0, 0, var(--siag-login-hero-overlay-end))),
linear-gradient(160deg, var(--siag-login-brand), var(--siag-login-brand-dark));
color: var(--siag-login-on-brand);
display: flex;
justify-content: center;
overflow: hidden;
padding: clamp(24px, 5vh, 44px);
position: relative;
}
.siag-login-hero:before {
background-image:
linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
background-size: 28px 28px;
bottom: 0;
content: '';
left: 0;
opacity: .38;
position: absolute;
right: 0;
top: 38%;
}
.siag-login-hero-inner {
max-width: 520px;
position: relative;
text-align: center;
z-index: 1;
}
.siag-login-hero-title {
color: var(--siag-login-on-brand);
font-size: clamp(26px, 3.8vh, 34px);
font-weight: 700;
letter-spacing: -.4px;
line-height: 1.18;
margin-bottom: clamp(10px, 2vh, 18px);
text-shadow: none;
}
/*
* El min-height reserva sitio para el texto mas largo del carrusel: sin el, la
* figura sube y baja en cada cambio de slide.
*/
.siag-login-hero-text {
color: var(--siag-login-on-brand-soft);
font-size: clamp(15px, 1.9vh, 17px);
line-height: 1.55;
margin: 0 auto clamp(20px, 4.6vh, 42px);
max-width: 470px;
min-height: calc(2 * 1.55 * clamp(15px, 1.9vh, 17px));
}
.siag-login-preview {
background: rgba(6, 12, 24, .86);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 22px;
box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
margin: 0 auto;
max-width: 445px;
padding: 15px;
}
.siag-login-preview-screen {
align-items: center;
background: #101622;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 14px;
display: flex;
justify-content: center;
min-height: clamp(150px, 24vh, 210px);
overflow: hidden;
padding: clamp(12px, 2vh, 18px);
}
/*
* Figuras del carrusel (login/_hero_figura.php). Se dibujan con el color de la
* marca y blancos translucidos, nunca con hex propios, para que cada dominio
* las vea en su color. Todas comparten viewBox, asi que no saltan al cambiar.
*/
.siag-login-figura {
display: block;
height: auto;
width: 100%;
}
.siag-login-figura line,
.siag-login-figura polyline,
.siag-login-figura circle,
.siag-login-figura path,
.siag-login-figura rect {
vector-effect: non-scaling-stroke;
}
/* Estructura de fondo: ejes, rejillas y separadores */
.siag-login-figura-tenue {
fill: none;
stroke: rgba(255, 255, 255, .16);
stroke-width: 1;
}
/* Etiquetas y textos sugeridos con barras */
.siag-login-figura-relleno-tenue {
fill: rgba(255, 255, 255, .16);
}
/* Datos secundarios */
.siag-login-figura-relleno-suave {
fill: rgba(255, 255, 255, .3);
}
/* El dato que la figura quiere destacar */
.siag-login-figura-relleno-marca {
fill: var(--siag-login-brand);
}
.siag-login-figura-marca {
fill: var(--siag-login-brand);
}
.siag-login-figura-trazo-marca {
fill: none;
stroke: var(--siag-login-brand);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.5;
}
.siag-login-figura-tarjeta {
fill: rgba(255, 255, 255, .06);
stroke: rgba(255, 255, 255, .12);
stroke-width: 1;
}
/* Cronograma: la marca de "hoy" */
.siag-login-figura-hoy {
stroke: var(--siag-login-brand);
stroke-dasharray: 4 5;
stroke-width: 1.5;
}
/* Matriz de riesgo: intensidad creciente hacia el nivel mas alto */
.siag-login-figura-celda {
fill: rgba(255, 255, 255, .12);
}
.siag-login-figura-celda.nivel-2 {
fill: rgba(255, 255, 255, .24);
}
.siag-login-figura-celda.nivel-3 {
fill: rgba(var(--siag-login-brand-rgb), .55);
}
.siag-login-figura-celda.nivel-4 {
fill: var(--siag-login-brand);
}
.siag-login-figura-foco circle {
fill: none;
stroke: #fff;
stroke-width: 2;
}
.siag-login-figura-foco .siag-login-figura-foco-punto {
fill: #fff;
stroke: none;
}
/*
* Carrusel. Los estilos van acotados al hero porque el tema arrastra el CSS de
* Bootstrap y sus indicadores traen su propio aspecto.
*/
.siag-login-hero-carrusel {
margin: 0 auto;
max-width: 470px;
}
/*
* Transicion por desvanecido en lugar del deslizamiento lateral de Bootstrap.
* Dos razones: entre figuras que ilustran lo mismo, el fundido se lee mejor que
* un desplazamiento; y el deslizamiento se apoya en translate3d con
* backface-visibility, que en equipos sin aceleracion grafica -escritorios
* remotos, maquinas virtuales- puede dejar el slide en blanco.
*/
.siag-login-hero .carousel-inner > .item {
left: 0 !important;
opacity: 0;
transform: none !important;
transition: opacity .6s ease-in-out;
}
.siag-login-hero .carousel-inner > .item.active {
opacity: 1;
}
.siag-login-hero .carousel-inner > .item.active.left,
.siag-login-hero .carousel-inner > .item.active.right {
opacity: 0;
z-index: 1;
}
.siag-login-hero .carousel-inner > .item.next.left,
.siag-login-hero .carousel-inner > .item.prev.right {
opacity: 1;
z-index: 2;
}
.siag-login-hero .carousel-indicators {
bottom: auto;
left: 0;
margin: clamp(14px, 2.6vh, 24px) 0 0;
position: static;
width: 100%;
}
.siag-login-hero .carousel-indicators li {
background: transparent;
border: 2px solid var(--siag-login-on-brand-soft);
cursor: pointer;
height: 10px;
margin: 0 5px;
width: 10px;
}
.siag-login-hero .carousel-indicators li:hover {
border-color: var(--siag-login-on-brand);
}
.siag-login-hero .carousel-indicators li.active {
background: var(--siag-login-on-brand);
border-color: var(--siag-login-on-brand);
height: 10px;
margin: 0 5px;
width: 22px;
}
.siag-login-hero .carousel-indicators li:focus-visible {
outline: 3px solid rgba(255, 255, 255, .5);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.siag-login-hero .carousel-inner > .item {
transition: none;
}
}
/*
* Los espacios verticales se miden en vh acotado con clamp: en una pantalla
* amplia el diseno respira como hasta ahora, y en una corta se compacta solo,
* sin necesidad de encoger a mano cada formulario. Recuperar contrasena tiene
* tres campos mas que el login y era el que se salia.
*/
.siag-login-form-side {
/* flex-start + margin auto en la tarjeta la centra cuando cabe, pero deja
que se desborde hacia abajo y sea alcanzable con scroll cuando no. Con
align-items: center el sobrante se corta por arriba y no hay forma de
llegar a el. */
align-items: center;
background: var(--siag-login-soft);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(20px, 4vh, 42px) 42px clamp(18px, 3vh, 30px);
position: relative;
}
.siag-login-card {
margin: auto 0;
max-width: 480px;
width: 100%;
}
/*
* El logo va directamente sobre el panel, sin recuadro. El fondo del panel es
* claro, asi que un logo con transparencia se integra; los formatos sin canal
* alfa (jpg, gif) aportan su propio fondo.
*/
/* Sin altura minima: el bloque mide lo que mida el logo de cada marca */
.siag-login-form-logo-pill {
align-items: center;
display: flex;
justify-content: center;
margin: 0 auto clamp(22px, 4.2vh, 42px);
width: 100%;
}
/*
* Vale cualquier formato: png, jpg, gif, webp y svg.
*
* Todos los logos ocupan el mismo ancho y el alto lo pone su propia proporcion:
* uno apaisado queda bajo, uno compacto queda alto, y ninguno se deforma porque
* height: auto deriva la altura del ancho. Asi la marca de cada dominio siempre
* se lee al mismo tamano horizontal, que es la referencia visual de la tarjeta.
*
* El width al 100% es ademas necesario para un svg con viewBox pero sin
* width/height: no tiene tamano intrinseco y el navegador lo pintaria a los
* 300px por defecto.
*/
.siag-login-form-logo {
display: block;
height: auto;
/* Red de seguridad para un logo casi cuadrado, que a este ancho se comeria
la pantalla. Con las proporciones habituales (2:1 a 4:1) nunca actua. */
max-height: 200px;
object-fit: contain;
object-position: center;
width: var(--siag-login-logo-ancho);
}
.siag-login-title {
color: #10151f;
font-size: clamp(22px, 2.9vh, 27px);
font-weight: 700;
letter-spacing: -.3px;
line-height: 1.22;
/* El margen era de 6px porque debajo venia un subtitulo, que se elimino de
las dos pantallas: ahora separa el encabezado del primer campo */
margin-bottom: clamp(16px, 2.6vh, 26px);
text-align: center;
text-shadow: none;
}
/*
* El encabezado del login es una instruccion, no un titulo de dos palabras:
* mantiene el h2 para que un lector de pantalla lo encuentre, pero con el peso
* visual de una frase. A 27px y en negrita ocupaba dos lineas y competia con el
* logo, que es quien hace de encabezado visual de la tarjeta.
*/
.siag-login-title.is-instruccion {
font-size: clamp(15px, 2vh, 16px);
font-weight: 500;
letter-spacing: 0;
line-height: 1.4;
}
.siag-login-card .widget,
.siag-login-card .widget-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0;
padding: 0;
}
.siag-login-card .form-group {
margin-bottom: clamp(11px, 1.9vh, 18px);
}
.siag-login-card label {
color: #10151f;
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
/*
* El tema define .form-control { border-radius: 0 !important }, asi que aqui
* hace falta !important para recuperar las esquinas redondeadas del diseno.
*/
.siag-login-card .form-control,
.siag-login-card .select2-container .select2-choice {
background: #fff;
border: 1px solid #aeb6c4;
border-radius: var(--siag-login-radio) !important;
box-shadow: none;
color: var(--siag-login-text);
font-size: 15px;
height: 50px;
padding: 12px 15px;
}
.siag-login-card .form-control:focus,
.siag-login-card .select2-container-active .select2-choice {
border-color: var(--siag-login-brand);
box-shadow: 0 0 0 3px rgba(var(--siag-login-brand-rgb), .16);
}
/* Foco de teclado visible, que el tema no cubre */
.siag-login-card .btn-login-primary:focus-visible,
.siag-login-card a:focus-visible,
.siag-login-password-toggle:focus-visible {
outline: 3px solid rgba(var(--siag-login-brand-rgb), .45);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.siag-login-card .form-control,
.siag-login-card .btn-login-primary,
.siag-login-card a,
.siag-login-password-toggle {
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
}
.siag-login-password-wrap {
position: relative;
}
.siag-login-password-wrap .form-control {
padding-right: 48px;
}
.siag-login-password-toggle {
align-items: center;
background: transparent;
border: 0;
color: #4c5667;
display: flex;
height: 48px;
justify-content: center;
position: absolute;
right: 2px;
top: 1px;
width: 46px;
}
.siag-login-actions {
margin-top: clamp(12px, 2vh, 18px);
}
.siag-login-actions-link {
margin-top: clamp(12px, 2vh, 18px);
}
/*
* Ayuda a demanda. Las instrucciones de formato solo estorban a quien ya sabe
* su usuario, que es casi todo el mundo: viven en el tooltip de este boton, y
* el mensaje de validacion las repite entero si alguien se equivoca.
*/
.siag-login-hint {
background: transparent;
border: 0;
color: var(--siag-login-muted);
font-size: 13px;
line-height: 1;
margin-left: 5px;
opacity: .45;
padding: 0;
vertical-align: baseline;
}
.siag-login-hint:hover,
.siag-login-hint:focus {
color: var(--siag-login-brand-btn);
opacity: 1;
}
.siag-login-field-error {
font-size: 13px;
font-weight: 600;
margin: 7px 0 0;
}
.siag-login-footer-sep {
color: var(--siag-login-border);
margin: 0 6px;
}
/*
* Casilla de verificacion humana. Es propia y no el widget de Google, que se
* dibuja en un iframe y no admite estilos: asi toma el color de cada marca. El
* reCAPTCHA real se ejecuta invisible detras de este control.
*/
.siag-login-humano {
align-items: center;
background: #fff;
border: 1px solid var(--siag-login-border);
border-radius: var(--siag-login-radio);
cursor: pointer;
display: flex;
gap: 12px;
min-height: 50px;
padding: 8px 14px;
user-select: none;
}
.siag-login-humano:hover {
border-color: var(--siag-login-brand);
}
.siag-login-humano.is-verificado {
border-color: var(--siag-login-brand);
cursor: default;
}
.siag-login-humano-marca {
align-items: center;
border: 2px solid var(--siag-login-brand);
border-radius: 50%;
color: transparent;
display: flex;
flex: 0 0 auto;
font-size: 12px;
height: 26px;
justify-content: center;
width: 26px;
}
.siag-login-humano.is-verificado .siag-login-humano-marca {
background: var(--siag-login-brand-btn);
border-color: var(--siag-login-brand-btn);
color: var(--siag-login-on-brand);
}
/* Mientras Google responde, el circulo gira en lugar de mostrar el check */
.siag-login-humano.is-cargando .siag-login-humano-marca {
animation: siag-login-girar .9s linear infinite;
border-color: var(--siag-login-border);
border-top-color: var(--siag-login-brand);
}
@keyframes siag-login-girar {
to {
transform: rotate(360deg);
}
}
.siag-login-humano-texto {
color: var(--siag-login-text);
flex: 1 1 auto;
font-size: 14px;
}
.siag-login-humano:focus {
border-color: var(--siag-login-brand);
box-shadow: 0 0 0 3px rgba(var(--siag-login-brand-rgb), .16);
outline: none;
}
/* El widget invisible no ocupa sitio, pero su reto modal si debe verse */
#siagRecaptcha {
height: 0;
overflow: visible;
}
.siag-login-card .btn-login-primary {
background: var(--siag-login-brand-btn);
border: 0;
border-radius: var(--siag-login-radio) !important;
box-shadow: none;
/* El texto del boton va sobre el color de marca: mismo calculo que el hero */
color: var(--siag-login-on-brand);
font-size: 16px;
font-weight: 700;
height: 50px;
text-shadow: none;
}
/*
* Se oscurece el fondo sin cambiar el color del texto: si la marca es clara el
* texto es oscuro, y pasarlo a blanco en hover producia un parpadeo de color.
*/
.siag-login-card .btn-login-primary:hover,
.siag-login-card .btn-login-primary:focus {
background: var(--siag-login-brand-btn);
color: var(--siag-login-on-brand);
filter: brightness(.92);
}
.siag-login-card .btn-login-primary.disabled,
.siag-login-card .btn-login-primary[disabled] {
cursor: default;
opacity: .72;
/* Bloquea el segundo clic sin usar el atributo disabled, que cancelaria
el envio del formulario en curso */
pointer-events: none;
}
.siag-login-card .olvideContrasena.disabled {
cursor: default;
opacity: .6;
pointer-events: none;
}
.siag-login-link,
.siag-login-card a {
color: var(--siag-login-brand-dark);
}
.siag-login-forgot {
display: inline-block;
font-size: 14px;
margin-top: 10px;
}
/*
* Chip de la cuenta en uso: una sola fila con el identificador y la accion para
* cambiarlo. Antes apilaba la etiqueta "Usuario" sobre el valor y repetia el
* enlace de cambio al pie del formulario.
*/
.siag-login-user-summary {
align-items: center;
background: #fff;
border: 1px solid var(--siag-login-border);
border-radius: var(--siag-login-radio);
display: flex;
gap: 10px;
/* El espaciado lo pone el .form-group, igual que en los demas campos.
9px de padding + 32px del avatar dan los mismos 50px que los inputs. */
padding: 9px 12px;
}
.siag-login-user-avatar {
align-items: center;
background: rgba(var(--siag-login-brand-rgb), .12);
border-radius: 50%;
color: var(--siag-login-brand-btn);
display: flex;
flex: 0 0 auto;
font-size: 14px;
height: 32px;
justify-content: center;
width: 32px;
}
.siag-login-user-id {
color: var(--siag-login-text);
flex: 1 1 auto;
font-size: 14px;
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.siag-login-user-change {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
}
/*
* En el flujo, no absoluto: asi ocupa su alto real en vez de obligar al panel a
* reservarle un padding inferior fijo, y no puede solaparse con un formulario
* largo. El margin auto de la tarjeta lo mantiene abajo cuando sobra espacio.
*/
.siag-login-footer {
color: #40506a;
font-size: 13px;
margin-top: clamp(14px, 2.4vh, 26px);
text-align: center;
width: 100%;
}
/*
* El tema pinta las alertas en bloques solidos con texto blanco (.alert-danger
* sobre #bd362f). Aqui se reescriben como banda suave con borde lateral, que es
* lo que pide la estetica de la tarjeta.
*/
.siag-login-alert,
.siag-login-card .alert {
background: #fff !important;
border: 1px solid var(--siag-login-border) !important;
border-left: 4px solid var(--siag-login-muted) !important;
border-radius: var(--siag-login-radio) !important;
box-shadow: none;
color: var(--siag-login-text) !important;
font-size: 14px;
line-height: 1.45;
margin-top: 18px;
padding: 13px 15px;
}
.siag-login-alert p,
.siag-login-card .alert p {
margin: 0;
}
.siag-login-card .alert-success,
.siag-login-alert.alert-success {
border-left-color: var(--siag-login-success) !important;
}
.siag-login-card .alert-danger,
.siag-login-alert.alert-danger {
border-left-color: var(--siag-login-danger) !important;
}
/* Instrucciones, no fallos: se muestran con el color de marca */
.siag-login-alert.siag-login-alert-info {
border-left-color: var(--siag-login-brand) !important;
}
.siag-login-card .alert .close {
color: var(--siag-login-muted);
opacity: .7;
text-shadow: none;
}
/* Recuperar contrasena */
/*
* La imagen del captcha se muestra con el mismo alto que los inputs (50px) para
* que la fila no rompa el ritmo vertical del formulario. El helper la genera ya
* a ese tamano, asi que no hay reescalado.
*/
/*
* Imagen y campo comparten fila: apilados gastaban 60px de alto para pedir seis
* caracteres, y este formulario es el mas largo de las dos pantallas.
*/
.siag-login-captcha-row {
align-items: center;
display: flex;
gap: 10px;
}
.siag-login-captcha-row .form-control {
flex: 1 1 45%;
min-width: 0;
}
.siag-login-captcha {
background: #fff;
border: 1px solid var(--siag-login-border);
border-radius: var(--siag-login-radio);
display: block;
flex: 1 1 55%;
height: 50px;
min-width: 0;
overflow: hidden;
padding: 0;
}
/*
* La imagen llena el campo de lado a lado. El helper de CodeIgniter escribe
* width/height en el style inline del ![]()
, de ahi los !important.
*/
.siag-login-captcha img {
display: block;
height: 100% !important;
object-fit: fill;
width: 100% !important;
}
/*
* Errores de validacion. Este proyecto sobrescribe showErrors en
* assets/js/form-validatorCA.init.js: no genera label.error ni marca el input
* con .error, sino que anade .has-error al .form-group e inyecta un
* en el ancestro. Estas son las reglas que de
* verdad se aplican.
*/
.siag-login-card .form-group.has-error .form-control,
.siag-login-card .form-group.has-error .select2-container .select2-choice {
border-color: var(--siag-login-danger);
}
.siag-login-card .form-group.has-error .form-control:focus {
box-shadow: 0 0 0 3px rgba(179, 53, 47, .16);
}
.siag-login-card p.has-error.help-block {
color: var(--siag-login-danger);
display: block;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
margin: 7px 0 0 !important;
}
/*
* El mensaje se inyecta en el div ancestro mas cercano, que en los campos de
* contrasena es el contenedor del boton del ojo. Se saca del flujo relativo
* para que no quede pisado por el icono.
*/
.siag-login-password-wrap p.has-error.help-block {
padding-right: 46px;
position: static;
}
/* Select2 3.x: el tema lo dimensiona para un control de 34px */
.siag-login-card .select2-container {
width: 100% !important;
}
.siag-login-card .select2-container .select2-choice {
line-height: 26px;
}
.siag-login-card .select2-container .select2-choice > .select2-chosen {
margin-right: 34px;
}
.siag-login-card .select2-container .select2-choice .select2-arrow {
background: transparent;
border: 0;
border-radius: 0 var(--siag-login-radio) var(--siag-login-radio) 0 !important;
width: 34px;
}
.siag-login-card .select2-container .select2-choice .select2-arrow b {
background-position: 8px 13px;
}
.siag-login-card .select2-container .select2-choice abbr {
top: 18px;
}
.select2-drop.select2-drop-active {
border-color: var(--siag-login-brand);
}
@media (max-width: 991px) {
.siag-login-page {
display: block;
min-height: 100vh;
}
.siag-login-hero {
display: none;
}
.siag-login-form-side {
min-height: 100vh;
padding: 28px 18px 22px;
}
.siag-login-footer {
font-size: 12px;
}
}
@media (max-width: 480px) {
/* En pantalla estrecha la fila del captcha se apila: en horizontal ni la
imagen ni el campo tendrian ancho util */
.siag-login-captcha-row {
display: block;
}
.siag-login-captcha {
margin-bottom: 10px;
}
.siag-login-title {
font-size: 25px;
}
.siag-login-card .form-control,
.siag-login-card .select2-container .select2-choice,
.siag-login-card .btn-login-primary {
height: 48px;
}
/* En pantalla estrecha el ancho estandar baja; la altura sigue siendo la
que dicte la proporcion de cada logo */
:root {
--siag-login-logo-ancho: 230px;
}
.siag-login-form-logo {
max-height: 150px;
}
}