@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Quicksand:wght@300;400;500;600;700&display=swap');
 * {
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
}
 body {
	 min-height: 100vh;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font-family: 'Quicksand', sans-serif;
	 background-image: linear-gradient(135deg, #4d262e, #af374b);
}
 .container {
	 background-color: #fdfdfd;
	 width: 350px;
	 height: 350px;
	 box-shadow: 15px 30px 30px rgba(0, 0, 0, 0.32);
	 border-radius: 0 5px 5px 5px;
	 position: relative;
}
 .container .top {
	 width: 40%;
	 height: 35px;
	 position: absolute;
	 top: -10%;
	 background-color: #fdfdfd;
	 transform: perspective(5px) rotateX(0.93deg);
	 border-radius: 6px 6px 0 0;
	 backface-visibility: hidden;
	 transform-origin: 0 0;
}
 .container .title {
	 width: 40%;
	 height: 35px;
	 position: absolute;
	 top: -10%;
	 padding: 10px 20px;
}
 .container .title .icon {
	 width: 20px;
	 height: 20px;
	 background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQxNi4yMjkgNDE2LjIyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDE2LjIyOSA0MTYuMjI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQwMy43MjksMjkuNjVINzEuODAyYy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41djg2LjM2M2MwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41czEyLjUtNS41OTcsMTIuNS0xMi41VjU0LjY1ICAgIGgzMDYuOTI3djMwNi45MjhIODQuMzAydi03My44NjFjMC02LjkwMy01LjU5Ny0xMi41LTEyLjUtMTIuNXMtMTIuNSw1LjU5Ny0xMi41LDEyLjV2ODYuMzYxYzAsNi45MDMsNS41OTcsMTIuNSwxMi41LDEyLjUgICAgaDMzMS45MjdjNi45MDIsMCwxMi41LTUuNTk3LDEyLjUtMTIuNVY0Mi4xNUM0MTYuMjI5LDM1LjI0Nyw0MTAuNjMxLDI5LjY1LDQwMy43MjksMjkuNjV6IiBmaWxsPSIjODczMTRlIi8+CgkJPHBhdGggZD0iTTE4NS40MTcsMjg3LjgxMWMwLDUuMDU3LDMuMDQ1LDkuNjEzLDcuNzE2LDExLjU1YzEuNTQ3LDAuNjQyLDMuMTcsMC45NSw0Ljc4MSwwLjk1YzMuMjUzLDAsNi40NTEtMS4yNyw4Ljg0Mi0zLjY2ICAgIGw3OS42OTctNzkuNjk3YzIuMzQ0LTIuMzQ0LDMuNjYtNS41MjMsMy42Ni04LjgzOWMwLTMuMzE2LTEuMzE2LTYuNDk1LTMuNjYtOC44MzlsLTc5LjY5Ny03OS42OTcgICAgYy0zLjU3NS0zLjU3NS04Ljk1MS00LjY0Ni0xMy42MjMtMi43MWMtNC42NzEsMS45MzYtNy43MTYsNi40OTMtNy43MTYsMTEuNTQ5djY3LjE5N0gxMi41Yy02LjkwMywwLTEyLjUsNS41OTctMTIuNSwxMi41ICAgIGMwLDYuOTAzLDUuNTk3LDEyLjUsMTIuNSwxMi41aDE3Mi45MTdWMjg3LjgxMUwxODUuNDE3LDI4Ny44MTF6IE0yMTAuNDE3LDE1OC41OTRsNDkuNTIxLDQ5LjUybC00OS41MjEsNDkuNTIxVjE1OC41OTR6IiBmaWxsPSIjODczMTRlIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
	 margin: 3px 10px 0px 5px;
	 position: relative;
	 float: left;
	 background-size: 18px 18px;
	 background-repeat: no-repeat;
	 background-position: center;
}

.bs-example { margin: 20px; }
#reader { max-width: 100vw; }


/* Logo de la UNI */
.logo-uni {
    height: 80px;        /* tamaño fijo vertical */
    width: auto;         /* ancho proporcional */
    display: block;
    position: absolute;  /* lo fija en la esquina */
    top: 10px;           /* separación desde arriba */
    left: 10px;          /* separación desde la izquierda */
    z-index: 1000;       /* que quede siempre encima */
}

/* Ajuste para pantallas pequeñas (celular) */
@media (max-width: 768px) {
    .logo-uni {
        height: 60px;  /* más pequeño en móviles */
        top: 5px;
        left: 5px;
    }
}


/* Marca de navbar */
.navbar-brand {
    width: 265px !important;
    max-width: 50% !important;
}

/* Lector de QR */
#reader {
    max-width: 100vw;
}

/* Texto de fecha y reloj */
.fecha-texto, 
#reloj {
    color: black;
    font-size: 20px;
}


 .container .title .text {
	 font-size: 18px;
	 font-weight: 600;
}
 .container .body {
	 padding: 60px 30px;
	 display: table;
}
 .container .body .email, .container .body .pass, .container .body .remember {
	 width: 100%;
	 display: inline-table;
	 padding: 5px 20px;
	 margin-bottom: 2px;
}
 .container .body .email label, .container .body .pass label {
	 float: left;
	 width: 100%;
	 top: 0px;
	 color: #032942;
	 font-size: 16px;
	 font-weight: 700;
	 text-align: left;
	 line-height: 1.5;
}
 .container .body .remember label {
	 float: left;
	 padding: 5px 0px;
	 line-height: 1.7;
	 width: 100%;
	 top: 0px;
	 color: #032942;
	 font-size: 16px;
	 font-weight: 700;
	 text-align: left;
}
 .container input[type=email], .container input[type=password], .container input[type=text]  {
	 width: 100%;
	 height: 32px;
	 padding: 0px 10px;
	 background-color: rgba(0, 0, 0, 0.03);
	 border: none;
	 display: inline;
	 color: #303030;
	 font-size: 16px;
	 font-weight: 400;
	 float: left;
	 -webkit-box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05), 1px 1px 0px rgba(255, 255, 255, 1);
	 -moz-box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05), 1px 1px 0px rgba(255, 255, 255, 1);
	 box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.05), 1px 1px 0px rgba(255, 255, 255, 1);
}
 .container input[type=email]:focus, .container input[type=password]:focus {
	 background-color: #f8f8c6;
	 outline: 0;
}
 .container .footer {
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 background: #87314e;
	 padding: 15px 20px;
	 width: 100%;
	 text-align: center;
	 color: white;
	 font-weight: 700;
	 font-size: 20px;
	 text-transform: uppercase;
	 border-radius: 0 0 4px 4px;
	 transition: all 0.3s;
}
 .container .footer:hover {
	 cursor: pointer;
	 background: #df405a;
}
 #email, #pass {
	 transition: all 0.2s;
}