* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
body {
min-height: 100vh;
font-family:
Arial,
Helvetica,
sans-serif;
background-color: #07101f;
background-image:
linear-gradient(
90deg,
rgba(4, 11, 25, 0.78) 0%,
rgba(4, 11, 25, 0.58) 48%,
rgba(4, 11, 25, 0.76) 100%
),
url("/assets/images/afv-gps-background.jpg?v=10");
background-size:
cover;
background-position:
center center;
background-repeat:
no-repeat;
background-attachment:
fixed;
overflow:
hidden;
}
/* ============================================================
CONTENEDOR PRINCIPAL
============================================================ */
.page {
width:
100%;
min-height:
100vh;
padding:
55px 70px;
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
70px;
position:
relative;
z-index:
2;
}
/* ============================================================
INFORMACION IZQUIERDA
============================================================ */
.brand-area {
flex:
1;
max-width:
680px;
color:
white;
}
.brand-small {
margin-bottom:
20px;
color:
#94a3b8;
font-size:
13px;
font-weight:
700;
letter-spacing:
3px;
text-transform:
uppercase;
}
.brand-title {
margin:
0;
font-size:
54px;
line-height:
1.05;
font-weight:
700;
letter-spacing:
-1px;
}
.brand-title span {
color:
#60a5fa;
}
.brand-description {
max-width:
550px;
margin-top:
24px;
color:
#dbeafe;
font-size:
16px;
line-height:
1.65;
text-shadow:
0 2px 8px
rgba(0, 0, 0, 0.5);
}
/* ============================================================
DATOS INFERIORES
============================================================ */
.system-info {
margin-top:
45px;
display:
flex;
gap:
28px;
flex-wrap:
wrap;
}
.system-item {
padding-left:
12px;
border-left:
2px solid #3b82f6;
}
.system-label {
color:
#94a3b8;
font-size:
9px;
font-weight:
700;
letter-spacing:
1px;
text-transform:
uppercase;
}
.system-value {
margin-top:
4px;
color:
#f8fafc;
font-size:
12px;
font-weight:
600;
}
/* ============================================================
PANEL LOGIN
============================================================ */
.login-wrapper {
width:
100%;
max-width:
410px;
}
.login-panel {
padding:
34px;
background:
rgba(11, 20, 38, 0.88);
border:
1px solid
rgba(255, 255, 255, 0.12);
border-radius:
16px;
box-shadow:
0 30px 90px
rgba(0, 0, 0, 0.55);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
}
/* ============================================================
LOGO
============================================================ */
.logo-row {
margin-bottom:
30px;
display:
flex;
align-items:
center;
gap:
13px;
}
.logo-icon {
width:
46px;
height:
46px;
padding-bottom:
10px;
display:
flex;
align-items:
flex-end;
justify-content:
center;
gap:
3px;
border-radius:
10px;
background:
linear-gradient(
145deg,
#2563eb,
#1d4ed8
);
box-shadow:
0 8px 25px
rgba(37, 99, 235, 0.35);
}
.logo-bar {
width:
4px;
background:
white;
border-radius:
1px;
}
.logo-bar:nth-child(1) {
height: 7px;
}
.logo-bar:nth-child(2) {
height: 12px;
}
.logo-bar:nth-child(3) {
height: 17px;
}
.logo-bar:nth-child(4) {
height: 23px;
}
.logo-name {
color:
white;
font-size:
16px;
font-weight:
700;
}
.logo-subtitle {
margin-top:
2px;
color:
#94a3b8;
font-size:
10px;
}
/* ============================================================
TITULOS
============================================================ */
.login-title {
margin:
0;
color:
white;
font-size:
25px;
font-weight:
700;
}
.login-description {
margin-top:
7px;
margin-bottom:
26px;
color:
#94a3b8;
font-size:
12px;
line-height:
1.5;
}
/* ============================================================
FORMULARIO
============================================================ */
.form-group {
margin-bottom:
16px;
}
label {
display:
block;
margin-bottom:
6px;
color:
#cbd5e1;
font-size:
10px;
font-weight:
700;
letter-spacing:
0.3px;
text-transform:
uppercase;
}
.input-wrapper {
position:
relative;
}
input {
width:
100%;
height:
45px;
padding:
0 12px;
border:
1px solid #334155;
border-radius:
7px;
background:
rgba(15, 23, 42, 0.76);
color:
white;
font-size:
13px;
outline:
none;
transition:
border-color 0.15s,
box-shadow 0.15s;
}
input::placeholder {
color:
#64748b;
}
input:focus {
border-color:
#3b82f6;
box-shadow:
0 0 0 3px
rgba(59, 130, 246, 0.14);
}
.password-input {
padding-right:
70px;
}
.show-password {
position:
absolute;
top:
50%;
right:
8px;
transform:
translateY(-50%);
padding:
7px;
border:
0;
background:
transparent;
color:
#94a3b8;
font-size:
9px;
font-weight:
700;
cursor:
pointer;
}
/* ============================================================
BOTON LOGIN
============================================================ */
.login-button {
width:
100%;
height:
46px;
margin-top:
5px;
border:
0;
border-radius:
7px;
background:
linear-gradient(
90deg,
#2563eb,
#1d4ed8
);
color:
white;
font-size:
12px;
font-weight:
700;
cursor:
pointer;
box-shadow:
0 8px 24px
rgba(37, 99, 235, 0.28);
transition:
transform 0.12s,
box-shadow 0.12s,
opacity 0.12s;
}
.login-button:hover {
transform:
translateY(-1px);
box-shadow:
0 12px 30px
rgba(37, 99, 235, 0.35);
}
.login-button:disabled {
opacity:
0.55;
cursor:
wait;
transform:
none;
}
/* ============================================================
ERROR
============================================================ */
#error {
display:
none;
margin-bottom:
15px;
padding:
10px 11px;
border:
1px solid
rgba(239, 68, 68, 0.3);
border-radius:
6px;
background:
rgba(127, 29, 29, 0.36);
color:
#fecaca;
font-size:
11px;
}
/* ============================================================
ESTADO INFERIOR
============================================================ */
.login-status {
margin-top:
22px;
padding-top:
18px;
border-top:
1px solid
rgba(255, 255, 255, 0.08);
display:
flex;
align-items:
center;
justify-content:
space-between;
color:
#64748b;
font-size:
9px;
}
.status {
display:
flex;
align-items:
center;
gap:
6px;
}
.status-dot {
width:
7px;
height:
7px;
border-radius:
50%;
background:
#22c55e;
box-shadow:
0 0 8px
rgba(34, 197, 94, 0.7);
}
/* ============================================================
FOOTER
============================================================ */
.footer {
position:
absolute;
left:
70px;
bottom:
25px;
color:
#94a3b8;
font-size:
9px;
letter-spacing:
0.3px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (
max-width: 900px
) {
body {
overflow-y:
auto;
background-position:
center center;
}
.page {
padding:
30px 20px;
justify-content:
center;
}
.brand-area {
display:
none;
}
.login-wrapper {
max-width:
430px;
}
.footer {
left:
20px;
right:
20px;
bottom:
15px;
text-align:
center;
}
}
@media (
max-width: 480px
) {
.login-panel {
padding:
27px 22px;
}
}
/* ============================================================
AJUSTE PARA PORTATILES Y PANTALLAS DE POCA ALTURA
============================================================ */
@media (min-width: 901px) and (max-height: 900px) {
body {
min-height: 100dvh;
background-attachment: scroll;
background-position: center center;
}
.page {
min-height: 100dvh;
padding: 24px 5vw;
gap: 42px;
}
.brand-area {
max-width: 620px;
}
.brand-small {
margin-bottom: 14px;
font-size: 11px;
letter-spacing: 2.5px;
}
.brand-title {
font-size: clamp(38px, 3.5vw, 48px);
line-height: 1.02;
}
.brand-description {
max-width: 530px;
margin-top: 17px;
font-size: 14px;
line-height: 1.5;
}
.system-info {
margin-top: 25px;
gap: 20px;
}
.login-wrapper {
max-width: 390px;
}
.login-panel {
padding: 24px 28px;
border-radius: 14px;
}
.logo-row {
margin-bottom: 19px;
}
.logo-icon {
width: 42px;
height: 42px;
}
.login-title {
font-size: 22px;
}
.login-description {
margin-top: 6px;
margin-bottom: 18px;
font-size: 11px;
}
.form-group {
margin-bottom: 12px;
}
input {
height: 42px;
}
.login-button {
height: 43px;
}
.login-status {
margin-top: 15px;
padding-top: 13px;
}
.footer {
left: 5vw;
bottom: 10px;
}
}
@media (min-width: 901px) and (max-height: 720px) {
.page {
padding-top: 14px;
padding-bottom: 14px;
}
.brand-title {
font-size: clamp(34px, 3.2vw, 42px);
}
.brand-description {
margin-top: 12px;
font-size: 13px;
}
.system-info {
margin-top: 17px;
}
.login-panel {
padding: 18px 24px;
}
.logo-row {
margin-bottom: 13px;
}
.login-description {
margin-bottom: 13px;
}
.form-group {
margin-bottom: 9px;
}
.login-status {
margin-top: 11px;
padding-top: 10px;
}
.footer {
display: none;
}
}