@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&family=Inter:wght@400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',Arial,Helvetica,sans-serif;
}

:root{
--blue:#00d9ff;
--blue-soft:rgba(0,217,255,.35);
--bg-1:#03070b;
--panel:rgba(5,12,18,.58);
--border:rgba(0,217,255,.20);
--text-dim:#8295a8;
}

html,body{
height:100%;
}

body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
position:relative;
overflow:hidden;
background:var(--bg-1);
}

/* =========================================================
   GLOBO — MÁS GRANDE Y PROTAGONISTA
   ========================================================= */

#globe-canvas{
position:fixed;
inset:0;
width:100%;
height:100%;
z-index:0;

/* Tamaño más equilibrado */
transform:scale(1.12);

/* Mantiene el mundo hacia la derecha */
transform-origin:65% 50%;

/* Colores naturales del planeta — sin tinte de color, solo un leve realce
   de contraste/brillo y un glow suave azul alrededor (atmósfera) */
filter:
saturate(1.08)
contrast(1.04)
brightness(1.02)
drop-shadow(0 0 40px rgba(60,140,255,.18));
}

/* =========================================================
   GRANO FINO
   ========================================================= */

body::after{
content:"";
position:fixed;
inset:0;
z-index:1;
pointer-events:none;
opacity:.04;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   VIÑETA
   ========================================================= */

html::before{
content:"";
position:fixed;
inset:0;
z-index:1;
pointer-events:none;

background:
radial-gradient(
ellipse 1100px 850px at 62% 50%,
transparent 25%,
rgba(0,0,0,.78) 100%
);
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-wrap{
width:100%;
max-width:390px;

position:relative;
z-index:2;

/* LO LLEVAMOS HACIA LA IZQUIERDA */
margin-right:auto;
margin-left:6%;

/* Mantiene la tarjeta centrada verticalmente */
}

/* =========================================================
   IDENTIDAD GEOCONTROL
   ========================================================= */

.login-wrap::before{
content:"GEOCONTROL";

display:block;
text-align:center;

font-size:11px;
letter-spacing:.35em;

color:var(--blue);

margin-bottom:20px;

font-weight:600;
opacity:.95;

text-shadow:
0 0 8px rgba(0,217,255,.35),
0 0 20px rgba(0,217,255,.15);
}

/* =========================================================
   TARJETA
   ========================================================= */

.card{
background:var(--panel);

backdrop-filter:blur(26px) saturate(1.15);
-webkit-backdrop-filter:blur(26px) saturate(1.15);

border:1px solid var(--border);

border-radius:16px;

padding:42px 36px 34px;

text-align:center;

box-shadow:
0 40px 90px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.02) inset,
0 0 40px rgba(0,217,255,.06);
}

/* =========================================================
   TITULO
   ========================================================= */

h1{
font-family:'Playfair Display',serif;

font-style:italic;
font-weight:500;

font-size:27px;

color:#e9f8ff;

letter-spacing:.01em;

margin-bottom:8px;

line-height:1.25;

text-shadow:
0 0 15px rgba(0,217,255,.08);
}

/* =========================================================
   SUBTITULO
   ========================================================= */

p{
color:var(--text-dim);

font-size:11.5px;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:30px;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

form{
display:flex;
flex-direction:column;
gap:15px;
}

input{
width:100%;

padding:14px 4px;

background:transparent;

border:none;

border-bottom:1px solid rgba(255,255,255,.15);

border-radius:0;

color:#e9f8ff;

font-size:14.5px;

outline:none;

transition:
border-color .25s,
box-shadow .25s;

text-align:left;
}

input::placeholder{
color:#617383;

font-size:13px;

letter-spacing:.02em;
}

input:focus{
border-bottom-color:var(--blue);

box-shadow:
0 4px 15px rgba(0,217,255,.08);
}

/* =========================================================
   BOTÓN
   ========================================================= */

button{
margin-top:16px;

padding:14px;

border:1px solid var(--blue);

border-radius:2px;

background:transparent;

color:var(--blue);

font-size:12px;

font-weight:600;

letter-spacing:.18em;

text-transform:uppercase;

cursor:pointer;

transition:
background .25s,
color .25s,
box-shadow .25s,
transform .2s;
}

button:hover{
background:var(--blue);

color:#021015;

box-shadow:
0 8px 30px var(--blue-soft),
0 0 25px rgba(0,217,255,.18);

transform:translateY(-1px);
}

/* =========================================================
   ENLACE
   ========================================================= */

a{
display:inline-block;

margin-top:22px;

color:var(--text-dim);

text-decoration:none;

font-size:11px;

letter-spacing:.1em;

text-transform:uppercase;

border-bottom:1px solid transparent;

transition:
color .2s,
border-color .2s;
}

a:hover{
color:var(--blue);

border-bottom-color:var(--blue-soft);

text-shadow:
0 0 10px rgba(0,217,255,.2);
}

/* =========================================================
   ERROR
   ========================================================= */

.error{
background:rgba(180,60,50,.12);

border:1px solid rgba(180,60,50,.35);

color:#e2a49c;

padding:11px 13px;

border-radius:2px;

font-size:12px;

margin-bottom:18px;

text-align:left;

letter-spacing:.01em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

.login-wrap{
margin-left:auto;
margin-right:auto;
}

#globe-canvas{
transform:scale(1.20);
transform-origin:60% 50%;
}

}

@media(max-width:600px){

body{
padding:24px 16px;
}

.login-wrap{
max-width:100%;
margin-left:auto;
margin-right:auto;
}

.login-wrap::before{
font-size:10px;
letter-spacing:.28em;
margin-bottom:16px;
}

.card{
padding:32px 24px 26px;
border-radius:8px;
}

h1{
font-size:23px;
}

p{
font-size:10.5px;
margin-bottom:24px;
}

form{
gap:14px;
}

input{
padding:15px 4px;
font-size:16px;
}

button{
padding:16px;
font-size:12.5px;
}

a{
margin-top:20px;
font-size:11.5px;
}

}

/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media(max-width:380px){

.card{
padding:26px 18px 22px;
}

h1{
font-size:20px;
}

}

/* =========================================================
   CELULAR HORIZONTAL
   ========================================================= */

@media(max-height:560px) and (orientation:landscape){

body{
align-items:flex-start;
padding-top:24px;
}

.login-wrap::before{
margin-bottom:10px;
}

.card{
padding:22px 28px;
}

p{
margin-bottom:16px;
}

form{
gap:10px;
}

}

/* =========================================================
   FONDO DE RESPALDO
   ========================================================= */

body{
background:
radial-gradient(
ellipse at 65% 40%,
#071923 0%,
#03070b 70%
);
}