/*=========================================================
DYFA MOTOTAXI
LOGIN TAXISTA
BLOQUE 1
=========================================================*/

/*=========================================================
VARIABLES
=========================================================*/

:root{

--azul:#2563eb;

--azul-hover:#1d4ed8;

--oscuro:#0f172a;

--gris:#64748b;

--gris-claro:#e2e8f0;

--blanco:#ffffff;

--success:#16a34a;

--danger:#dc2626;

--glass:rgba(255,255,255,.15);

}

/*=========================================================
RESET
=========================================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:linear-gradient(
135deg,
#0f172a 0%,
#1e3a8a 55%,
#2563eb 100%
);

min-height:100vh;

overflow-x:hidden;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

position:relative;

}

/*=========================================================
FONDO
=========================================================*/

.bg-circle{

position:fixed;

border-radius:50%;

filter:blur(80px);

opacity:.30;

z-index:0;

animation:flotar 10s ease-in-out infinite;

}

.bg1{

width:380px;

height:380px;

background:#3b82f6;

top:-130px;

left:-130px;

}

.bg2{

width:320px;

height:320px;

background:#60a5fa;

bottom:-120px;

right:-100px;

animation-delay:2s;

}

.bg3{

width:240px;

height:240px;

background:#93c5fd;

top:45%;

left:55%;

animation-delay:4s;

}

@keyframes flotar{

0%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(-25px) scale(1.05);

}

100%{

transform:translateY(0) scale(1);

}

}

/*=========================================================
CONTENEDOR PRINCIPAL
=========================================================*/

.login-container{

position:relative;

z-index:2;

width:100%;

max-width:1200px;

display:grid;

grid-template-columns:1.1fr .9fr;

background:rgba(255,255,255,.10);

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.20);

border-radius:35px;

overflow:hidden;

box-shadow:

0 25px 60px rgba(0,0,0,.35);

}
/*=========================================================
PANEL IZQUIERDO
=========================================================*/

.login-left{

display:flex;

align-items:center;

justify-content:center;

padding:60px;

position:relative;

overflow:hidden;

}

.left-content{

width:100%;

max-width:520px;

color:var(--blanco);

z-index:2;

}

.logo{

margin-bottom:25px;

}

.logo img{

width:90px;

height:90px;

object-fit:contain;

filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

margin-bottom:25px;

border-radius:50px;

background:rgba(255,255,255,.15);

border:1px solid rgba(255,255,255,.25);

font-size:14px;

font-weight:600;

backdrop-filter:blur(10px);

}

.badge i{

font-size:18px;

color:#fde047;

}

.left-content h1{

font-size:42px;

font-weight:700;

line-height:1.25;

margin-bottom:18px;

}

.left-content h1 strong{

display:block;

color:#facc15;

}

.left-content p{

font-size:16px;

line-height:1.8;

opacity:.95;

margin-bottom:35px;

max-width:470px;

}

/*=========================================================
BENEFICIOS
=========================================================*/

.beneficios{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:40px;

}

.beneficios .item{

display:flex;

align-items:center;

gap:14px;

padding:15px 18px;

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.18);

border-radius:18px;

transition:.30s;

backdrop-filter:blur(10px);

}

.beneficios .item:hover{

transform:translateY(-4px);

background:rgba(255,255,255,.18);

}

.beneficios .item i{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.20);

font-size:20px;

color:#ffffff;

}

.beneficios .item span{

font-size:14px;

font-weight:600;

line-height:1.4;

}

/*=========================================================
ILUSTRACIÓN
=========================================================*/

.ilustracion{

margin-top:15px;

text-align:center;

}

.ilustracion img{

width:100%;

max-width:420px;

object-fit:contain;

animation:flotarMoto 4s ease-in-out infinite;

filter:drop-shadow(0 20px 35px rgba(0,0,0,.30));

}

@keyframes flotarMoto{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
/*=========================================================
PANEL DERECHO
=========================================================*/

.login-right{

display:flex;

justify-content:center;

align-items:center;

padding:60px;

background:rgba(255,255,255,.96);

position:relative;

}

.login-card{

width:100%;

max-width:470px;

animation:fadeLogin .6s ease;

}

@keyframes fadeLogin{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================
CABECERA
=========================================================*/

.card-header{

text-align:center;

margin-bottom:35px;

}

.icono-login{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(

135deg,

var(--azul),

var(--azul-hover)

);

color:#fff;

font-size:38px;

margin-bottom:18px;

box-shadow:

0 15px 35px

rgba(37,99,235,.30);

}

.card-header h2{

font-size:30px;

font-weight:700;

color:var(--oscuro);

margin-bottom:8px;

}

.card-header p{

font-size:15px;

color:var(--gris);

line-height:1.6;

}

/*=========================================================
ALERTA
=========================================================*/

.alerta-error{

display:flex;

align-items:center;

gap:12px;

padding:15px 18px;

border-radius:16px;

margin-bottom:25px;

background:#fee2e2;

border:1px solid #fecaca;

color:#b91c1c;

font-size:14px;

font-weight:500;

}

.alerta-error i{

font-size:18px;

flex-shrink:0;

}

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

.grupo{

margin-bottom:22px;

}

.grupo label{

display:flex;

align-items:center;

gap:8px;

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:#334155;

}

.grupo label i{

color:var(--azul);

}

/*=========================================================
INPUTS
=========================================================*/

.input-box{

position:relative;

}

.input-box input{

width:100%;

height:58px;

padding:0 55px 0 18px;

border:2px solid #dbe4f1;

border-radius:16px;

font-size:15px;

color:#334155;

background:#fff;

transition:.30s;

outline:none;

}

.input-box input:focus{

border-color:var(--azul);

box-shadow:

0 0 0 5px

rgba(37,99,235,.12);

}

.input-box input::placeholder{

color:#94a3b8;

}

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

.btn-password{

position:absolute;

top:50%;

right:16px;

transform:translateY(-50%);

border:none;

background:none;

cursor:pointer;

color:#64748b;

font-size:18px;

transition:.25s;

}

.btn-password:hover{

color:var(--azul);

transform:translateY(-50%) scale(1.1);

}
/*=========================================================
OPCIONES LOGIN
=========================================================*/

.opciones-login{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

margin:10px 0 30px;

flex-wrap:wrap;

}

.check{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

user-select:none;

font-size:14px;

font-weight:500;

color:#475569;

}

.check input{

width:18px;

height:18px;

accent-color:var(--azul);

cursor:pointer;

}

.link-password{

font-size:14px;

font-weight:600;

text-decoration:none;

color:var(--azul);

transition:.30s;

}

.link-password:hover{

color:var(--azul-hover);

text-decoration:underline;

}

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

.btn-login{

width:100%;

height:58px;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

border:none;

border-radius:18px;

background:linear-gradient(

135deg,

var(--azul),

var(--azul-hover)

);

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.35s;

box-shadow:

0 18px 35px

rgba(37,99,235,.28);

}

.btn-login:hover{

transform:translateY(-3px);

box-shadow:

0 25px 45px

rgba(37,99,235,.38);

}

.btn-login:active{

transform:scale(.98);

}

.btn-login:disabled{

cursor:not-allowed;

opacity:.75;

transform:none;

}

.btn-login i{

font-size:18px;

}

/*=========================================================
VOLVER
=========================================================*/

.volver{

margin-top:28px;

text-align:center;

}

.volver a{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:50px;

text-decoration:none;

font-size:14px;

font-weight:600;

color:#475569;

background:#f8fafc;

border:1px solid #e2e8f0;

transition:.30s;

}

.volver a:hover{

background:#eff6ff;

color:var(--azul);

border-color:#bfdbfe;

transform:translateY(-2px);

}

/*=========================================================
LOADER
=========================================================*/

.loader-login{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(15,23,42,.55);

backdrop-filter:blur(8px);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

}

.loader-login.active{

display:flex;

}

.loader-box{

width:340px;

max-width:90%;

padding:35px 30px;

border-radius:24px;

background:#fff;

text-align:center;

box-shadow:

0 20px 50px

rgba(0,0,0,.25);

animation:loaderShow .35s ease;

}

@keyframes loaderShow{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.spinner{

width:65px;

height:65px;

margin:0 auto 20px;

border:6px solid #dbeafe;

border-top:6px solid var(--azul);

border-radius:50%;

animation:girar 1s linear infinite;

}

@keyframes girar{

100%{

transform:rotate(360deg);

}

}

.loader-box h3{

font-size:20px;

font-weight:700;

color:var(--oscuro);

margin-bottom:10px;

}

.loader-box p{

font-size:14px;

color:var(--gris);

line-height:1.6;

}

/*=========================================================
FOOTER
=========================================================*/

.footer-login{

position:fixed;

left:0;

bottom:18px;

width:100%;

text-align:center;

z-index:5;

}

.footer-login p{

font-size:13px;

color:rgba(255,255,255,.85);

letter-spacing:.4px;

}


/*=========================================================
EFECTOS
=========================================================*/

::selection{

background:var(--azul);

color:#fff;

}

a{

transition:.30s;

}

button{

font-family:"Poppins",sans-serif;

}

input{

font-family:"Poppins",sans-serif;

}

img{

max-width:100%;

display:block;

}

/*=========================================================
MÓVILES
=========================================================*/

@media(max-width:768px){

body{

padding:15px;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

}

.login-container{

display:block;

width:100%;

max-width:420px;

border-radius:22px;

overflow:hidden;

}

/*=========================================
OCULTAR PANEL IZQUIERDO
=========================================*/

.login-left{

display:none;

}

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

.login-right{

width:100%;

padding:30px 22px;

background:#ffffff;

}

.login-card{

max-width:100%;

}

.icono-login{

width:70px;

height:70px;

font-size:28px;

margin-bottom:15px;

}

.card-header h2{

font-size:25px;

}

.card-header p{

font-size:14px;

}

.grupo{

margin-bottom:18px;

}

.grupo label{

font-size:13px;

}

.input-box input{

height:50px;

font-size:14px;

border-radius:14px;

}

.btn-password{

font-size:16px;

}

.opciones-login{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.btn-login{

height:50px;

font-size:15px;

border-radius:14px;

}

.volver{

margin-top:20px;

}

.volver a{

width:100%;

justify-content:center;

}

.footer-login{

position:relative;

margin-top:20px;

padding-bottom:10px;

}

.footer-login p{

font-size:12px;

color:#fff;

text-align:center;

}

}
/*=========================================================
MÓVILES PEQUEÑOS
=========================================================*/

@media(max-width:480px){

body{

padding:10px;

}

.login-container{

max-width:100%;

border-radius:18px;

}

.login-right{

padding:25px 18px;

}

.icono-login{

width:60px;

height:60px;

font-size:24px;

}

.card-header h2{

font-size:22px;

}

.card-header p{

font-size:13px;

}

.input-box input{

height:46px;

font-size:13px;

}

.btn-login{

height:46px;

font-size:14px;

}

.loader-box{

width:92%;

padding:25px;

}

}