/*
============================================================================
Portal CRM Lauricious
Login Premium
Diseñado por Sidinet Consultoría Digital y Sistemas
============================================================================
*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--cafe:#5A4032;
--cafe-hover:#463025;
--champagne:#C8A96A;
--crema:#F8F5EF;
--texto:#333;
--gris:#777;
--borde:#E8DED2;
--blanco:#FFF;

}

body{

font-family:'Inter',sans-serif;

background:#F5F5F5;

height:100vh;

overflow:hidden;

}

/*==================================================
LAYOUT
==================================================*/

.login-layout{

display:flex;

height:100vh;

}

/*==================================================
LADO IZQUIERDO
==================================================*/

.login-left{

width:60%;

position:relative;

background:url("../img/login-bg.jpg") center center;

background-size:cover;

display:flex;

align-items:center;

justify-content:center;

}

.login-overlay{

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

background:linear-gradient(

135deg,

rgba(44,30,20,.78),

rgba(90,64,50,.82)

);

}

.login-brand{

position:relative;

z-index:2;

color:white;

text-align:center;

width:70%;

}

.login-logo{

width:260px;

margin-bottom:35px;

}

.login-brand h1{

font-size:40px;

font-weight:700;

margin-bottom:25px;

letter-spacing:.5px;

}

.login-brand p{

font-size:18px;

line-height:1.8;

opacity:.95;

}

/*==================================================
LADO DERECHO
==================================================*/

.login-right{

width:40%;

display:flex;

justify-content:center;

align-items:center;

background:#FAFAFA;

padding:50px;

}

.login-card{

background:white;

width:100%;

max-width:470px;

padding:50px;

border-radius:24px;

box-shadow:

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

animation:fade .6s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==================================================
LOGO
==================================================*/

.login-logo-card{

width:180px;

display:block;

margin:auto;

margin-bottom:30px;

}

.login-card h2{

text-align:center;

font-size:32px;

color:var(--cafe);

margin-bottom:10px;

}

.subtitulo{

text-align:center;

color:#777;

margin-bottom:35px;

font-size:15px;

}

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

.login-card label{

display:block;

margin-bottom:8px;

margin-top:18px;

font-weight:600;

color:#555;

}

.input-icono{

display:flex;

align-items:center;

border:1px solid #DDD;

border-radius:12px;

padding:0 14px;

height:54px;

transition:.25s;

background:white;

}

.input-icono:focus-within{

border-color:var(--champagne);

box-shadow:0 0 0 4px rgba(200,169,106,.15);

}

.input-icono i{

font-size:18px;

color:#999;

margin-right:10px;

}

.input-icono input{

border:none;

outline:none;

width:100%;

font-size:15px;

font-family:'Inter',sans-serif;

background:transparent;

}

/*==================================================
MOSTRAR PASSWORD
==================================================*/

.mostrar-password{

display:flex;

align-items:center;

gap:8px;

margin-top:18px;

margin-bottom:28px;

font-size:14px;

color:#666;

}

/*==================================================
BOTON
==================================================*/

.btn-login{

width:100%;

height:54px;

border:none;

border-radius:12px;

background:var(--cafe);

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.btn-login:hover{

background:var(--cafe-hover);

transform:translateY(-2px);

}

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

.login-error{

background:#FDECEC;

color:#A12727;

padding:14px;

border-radius:12px;

margin-bottom:20px;

font-size:14px;

display:flex;

align-items:center;

gap:10px;

}

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

.login-footer{

text-align:center;

margin-top:35px;

font-size:13px;

color:#777;

line-height:1.7;

}

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

@media(max-width:1100px){

.login-left{

display:none;

}

.login-right{

width:100%;

padding:30px;

}

.login-card{

max-width:520px;

}

}

@media(max-width:600px){

.login-card{

padding:35px 25px;

border-radius:18px;

}

.login-logo-card{

width:150px;

}

.login-card h2{

font-size:26px;

}

}