@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

body { 
    font-family: Arial, sans-serif; 
    background-image: linear-gradient(216deg, rgba(77, 77, 77,0.05) 0%, rgba(77, 77, 77,0.05) 25%,rgba(42, 42, 42,0.05) 25%, rgba(42, 42, 42,0.05) 38%,rgba(223, 223, 223,0.05) 38%, rgba(223, 223, 223,0.05) 75%,rgba(36, 36, 36,0.05) 75%, rgba(36, 36, 36,0.05) 100%),
    linear-gradient(44deg, rgba(128, 128, 128,0.05) 0%, rgba(128, 128, 128,0.05) 34%,rgba(212, 212, 212,0.05) 34%, rgba(212, 212, 212,0.05) 57%,rgba(25, 25, 25,0.05) 57%, rgba(25, 25, 25,0.05) 89%,rgba(135, 135, 135,0.05) 89%, rgba(135, 135, 135,0.05) 100%),
    linear-gradient(241deg, rgba(55, 55, 55,0.05) 0%, rgba(55, 55, 55,0.05) 14%,rgba(209, 209, 209,0.05) 14%, rgba(209, 209, 209,0.05) 60%,rgba(245, 245, 245,0.05) 60%, rgba(245, 245, 245,0.05) 69%,rgba(164, 164, 164,0.05) 69%, rgba(164, 164, 164,0.05) 100%),
    linear-gradient(249deg, rgba(248, 248, 248,0.05) 0%, rgba(248, 248, 248,0.05) 32%,rgba(148, 148, 148,0.05) 32%, rgba(148, 148, 148,0.05) 35%,rgba(202, 202, 202,0.05) 35%, rgba(202, 202, 202,0.05) 51%,rgba(181, 181, 181,0.05) 51%, rgba(181, 181, 181,0.05) 100%),
    linear-gradient(92deg, hsl(214,0%,11%),hsl(214,0%,11%));
}

.login-box {
    width: 31%;
    margin: 26px auto;
    background: #fff;
    padding: 0px 36px 3px 25px;
    border-radius: 10px;
    -webkit-box-shadow: -4px 5px 1px 0px rgb(217 217 217 / 15%);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.05);
}

.img-logo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.logo-usados { width: 43%; margin: 0; padding: 0px; }

.login-box h2 {
    text-align: center;
    color: #000000;
    font-family: "Tajawal", sans-serif;
    font-size: 17px;
    font-weight: 500;
    margin: 0;
    line-height: 21px;
    padding: 0px 13px;
}

.login-box label {
    display: block;
    margin-top: 5px;
    font-weight: 600;
    font-family: system-ui;
}

.login-box input[type="email"],
.login-box input[type="password"] {
    width: 100%; 
    padding: 8px; 
    margin-top: 6px; 
    border: 1px solid #ccc; 
    border-radius: 5px;
}
.login-box button { width: 100%; padding: 13px; margin-top: 23px; background: #1976d2; color: #fff; border: none; border-radius: 5px; font-size: 17px; cursor: pointer; transition: background 0.2s; }
.login-box button:disabled { background: #aaa; cursor: not-allowed; }
.login-box .msg { margin-top: 15px; text-align: center; min-height: 20px; }
.login-box .ok { color: #388e3c; }
.login-box .error { color: #d32f2f; }
.login-acceso {
    font-family: "Tajawal", sans-serif;
   text-align:center;
   margin: 10px 0px 20px 0px;
}
@media (max-width: 450px) { .login-box {
    width: auto;
    margin: 38px 21px 0px 21px;
    min-height: 62vh;
    padding: 0px 30px 0px 22px !important;
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
    -webkit-box-shadow: -4px 5px 1px 0px rgb(255 11 11 / 16%);
    background-image: repeating-linear-gradient(135deg, rgba(240, 240, 240,0.02) 0px, rgba(240, 240, 240,0.02) 21px,rgba(224, 224, 224,0.02) 21px, rgba(224, 224, 224,0.02) 42px,rgba(208, 208, 208,0.02) 42px, rgba(208, 208, 208,0.02) 63px,rgba(192, 192, 192,0.02) 63px, rgba(192, 192, 192,0.02) 84px,rgba(175, 175, 175,0.02) 84px, rgba(175, 175, 175,0.02) 105px,rgba(159, 159, 159,0.02) 105px, rgba(159, 159, 159,0.02) 126px,rgba(143, 143, 143,0.02) 126px, rgba(143, 143, 143,0.02) 147px,rgba(127, 127, 127,0.02) 147px, rgba(127, 127, 127,0.02) 168px),repeating-linear-gradient(45deg, rgba(232, 232, 232,0.02) 0px, rgba(232, 232, 232,0.02) 21px,rgba(209, 209, 209,0.02) 21px, rgba(209, 209, 209,0.02) 42px,rgba(185, 185, 185,0.02) 42px, rgba(185, 185, 185,0.02) 63px,rgba(162, 162, 162,0.02) 63px, rgba(162, 162, 162,0.02) 84px,rgba(138, 138, 138,0.02) 84px, rgba(138, 138, 138,0.02) 105px,rgba(115, 115, 115,0.02) 105px, rgba(115, 115, 115,0.02) 126px,rgba(91, 91, 91,0.02) 126px, rgba(91, 91, 91,0.02) 147px,rgba(68, 68, 68,0.02) 147px, rgba(68, 68, 68,0.02) 168px),linear-gradient(90deg, #ffffff,#ffffff);
} }