html{
-webkit-text-size-adjust:100%;
}

body{
margin:0;
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
background:
radial-gradient(circle at top left,rgba(34,197,94,.12),rgba(34,197,94,0) 32%),
radial-gradient(circle at bottom right,rgba(37,99,235,.10),rgba(37,99,235,0) 28%),
#f1f5f9;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
min-height:100dvh;
padding:24px 16px;
box-sizing:border-box;
color:#0f172a;
}

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

.login-container{
width:430px;
max-width:100%;
background:white;
padding:42px 34px 36px;
border-radius:20px;
border:1px solid #e5e7eb;
box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 36px rgba(15,23,42,.08);
box-sizing:border-box;
}

/* ===== BRAND (WhatsApp + LESCOD) ===== */

.logo-container{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:24px;
}

.logo-container img.whatsapp{
width:42px;
}

.logo-container img.lescod{
width:320px;
max-width:90%;
display:block;
margin:auto;
margin-bottom:0;
}

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

.titulo-login{
text-align:center;
font-size:26px;
font-weight:600;
margin-bottom:25px;
background:linear-gradient(
90deg,
#22c55e,
#1d4ed8
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

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

.input-group{
margin-bottom:18px;
width:100%;
box-sizing:border-box;
}

.input-group input{
width:100%;
min-height:44px;
padding:10px 14px;
border-radius:12px;
border:1px solid #d1d5db;
background:#fff;
font-size:14px;
color:#0f172a;
transition:0.18s ease;
box-sizing:border-box;
display:block;
}

.input-group input:focus{
outline:none;
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,0.12);
}

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

.btn-login{
width:100%;
min-height:48px;
padding:14px 16px;
background:#22C55E;
border:none;
color:white;
font-size:16px;
font-weight:800;
border-radius:12px;
cursor:pointer;
transition:0.18s ease;
box-shadow:0 12px 24px rgba(34,197,94,.22);
}

.btn-login:hover{
background:#16A34A;
transform:translateY(-1px);
}

.btn-login:active{
background:linear-gradient(90deg, #22C55E 0%, #22C55E 38%, #1D4ED8 100%);
}

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

.footer{
text-align:center;
margin-top:20px;
font-size:14px;
color:#6b7280;
}

.legal-links{
margin-top:10px;
display:flex;
flex-wrap:wrap;
gap:8px 12px;
justify-content:center;
}

.legal-links a{
color:#334155;
text-decoration:none;
font-size:13px;
}

.legal-links a:hover{
text-decoration:underline;
}

.legal-manage-btn{
margin-top:10px;
border:1px solid #cbd5e1;
background:#f8fafc;
color:#1e293b;
border-radius:12px;
padding:10px 12px;
font-size:13px;
cursor:pointer;
}

.titulo-wrapper{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:6px 0 28px;
padding:0 10px;
flex-wrap:wrap;
text-align:center;
}

.titulo-wrapper img{
width:24px;
flex:0 0 auto;
}

.titulo-texto{
font-size:22px;
font-weight:600;
line-height:1.2;
background:linear-gradient(
90deg,
#22c55e,
#1d4ed8
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
display:inline-block;
max-width:100%;
overflow-wrap:anywhere;
}

@media (max-width: 640px){
.login-container{
padding:36px 24px 30px;
border-radius:18px;
}

.logo-container{
margin-bottom:20px;
}

.titulo-wrapper{
margin:4px 0 24px;
padding:0 6px;
gap:8px;
}

.titulo-texto{
font-size:20px;
}

.input-group input,
.btn-login{
min-height:46px;
}

.input-group input{
font-size:14px;
padding:10px 13px;
}
}

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

.loader{
display:none;
margin-top:15px;
text-align:center;
}

.spinner{
border:4px solid #e5e7eb;
border-top:4px solid #25D366;
border-radius:50%;
width:30px;
height:30px;
animation:spin 1s linear infinite;
margin:auto;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.loading-text{
margin-top:10px;
font-size:14px;
color:#6b7280;
}

.login-error{
margin:0 0 16px;
padding:12px 14px;
border-radius:12px;
border:1px solid #fecaca;
background:#fef2f2;
color:#b91c1c;
text-align:center;
font-size:14px;
line-height:1.5;
}

.cookie-banner{
position:fixed;
left:calc(16px + env(safe-area-inset-left));
right:calc(16px + env(safe-area-inset-right));
bottom:calc(16px + env(safe-area-inset-bottom));
background:#0f172a;
color:#e2e8f0;
padding:14px;
border-radius:16px;
box-shadow:0 10px 24px rgba(0,0,0,.25);
z-index:1200;
}

.cookie-title{
font-size:15px;
font-weight:700;
margin-bottom:6px;
}

.cookie-banner p{
margin:0 0 10px 0;
font-size:13px;
line-height:1.4;
}

.cookie-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.btn-cookie{
border:none;
border-radius:12px;
padding:10px 14px;
font-size:13px;
cursor:pointer;
}

.btn-cookie-main{
background:#22c55e;
color:#fff;
}

.btn-cookie-main:active{
background:linear-gradient(90deg, #22C55E 0%, #22C55E 38%, #1D4ED8 100%);
}

.btn-cookie-soft{
background:#334155;
color:#e2e8f0;
border:1px solid #475569;
}

.cookie-modal-backdrop{
display:none;
position:fixed;
inset:0;
background:rgba(15,23,42,.6);
z-index:1250;
}

.cookie-modal{
display:none;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:460px;
max-width:calc(100% - 24px);
background:#fff;
border-radius:20px;
padding:22px;
box-shadow:0 16px 36px rgba(0,0,0,.25);
z-index:1300;
}

.cookie-modal h3{
margin:0 0 12px 0;
font-size:18px;
}

.cookie-option{
display:flex;
gap:10px;
align-items:flex-start;
padding:8px 0;
font-size:14px;
}

.cookie-option input{
margin-top:4px;
}

.cookie-policy-note{
margin:10px 0 12px 0;
font-size:12px;
color:#475569;
line-height:1.4;
}

.cookie-policy-note a{
color:#1d4ed8;
text-decoration:none;
}

@media (max-width: 600px){
.login-container{
padding:24px 18px;
border-radius:18px;
}

.titulo-texto{
font-size:26px;
}

.cookie-actions{
flex-direction:column;
}

.btn-cookie{
width:100%;
}
}