/* =========================================
   CASA GREEN LOGIN FINAL DEFINITIVO
   Limpio – Centrado – Profesional
========================================= */

body{
margin:0;
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#021f19,#064e3b);
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

/* ===== CONTENEDOR GENERAL ===== */
.login-container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
box-sizing:border-box;
}

/* ===== TARJETA ===== */
.login-card{
background:#ffffff;
width:100%;
max-width:500px;
border-radius:22px;
padding:55px 55px;
box-shadow:0 35px 90px rgba(0,0,0,.35);
}

/* ===== HEADER ===== */
.login-header{
text-align:center;
margin-bottom:35px;
}

.login-header img{
width:180px;
margin-bottom:12px;
}

.login-header h2{
margin:10px 0 5px 0;
color:#064e3b;
font-size:26px;
font-weight:600;
}

.login-header p{
font-size:15px;
color:#6b7280;
}

/* ===== INPUTS ===== */
.input-group{
margin-bottom:28px;
}

.input-group label{
display:block;
margin-bottom:10px;
font-size:15px;
font-weight:500;
color:#022c22;
}

.input-group input{
width:92%;
padding:18px 20px;
font-size:16px;
border:1.5px solid #e5e7eb;
border-radius:16px;
background:#f9fafb;
transition:.25s ease;
}

.input-group input:focus{
border-color:#064e3b;
background:#fff;
box-shadow:0 0 0 4px rgba(6,78,59,.15);
outline:none;
}

/* ===== PASSWORD ICON ===== */
.password-group{
position:relative;
}

.toggle-password{
position:absolute;
right:20px;
top:55px;
cursor:pointer;
color:#9ca3af;
font-size:18px;
}

/* ===== CHECKBOXES ALINEADOS PERFECTO ===== */

.checkbox-group{
margin:30px 0;
font-size:14px;
}

.check-item{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
}

.check-item input{
margin-top:4px;
accent-color:#064e3b;
flex-shrink:0;
}

/* 🔥 CONTROL REAL DEL ANCHO DEL TEXTO */
.check-item{
max-width:550px;   /* Ajusta aquí si quieres */
}

.link-modal{
color:#064e3b;
text-decoration:underline;
font-weight:500;
white-space:normal;
word-break:keep-all;
overflow-wrap:break-word;
}

/* ===== BOTÓN ===== */
.btn-login{
width:100%;
padding:18px;
background:#064e3b;
border:none;
color:#fff;
border-radius:16px;
font-weight:600;
font-size:16px;
cursor:pointer;
transition:.25s ease;
}

.btn-login:hover{
background:#022c22;
transform:translateY(-2px);
}

.btn-login:disabled{
background:#9ca3af;
cursor:not-allowed;
transform:none;
}

/* ===== LINKS ===== */
.login-links{
margin-top:30px;
display:flex;
justify-content:center;
gap:40px;
}

.login-links a{
color:#064e3b;
text-decoration:underline;
font-size:15px;
font-weight:500;
}

.login-links a:hover{
opacity:.7;
}

/* ===== FOOTER ===== */
.login-footer{
margin-top:35px;
color:#d1fae5;
font-size:14px;
text-align:center;
}

/* =========================================
   MODAL
========================================= */

.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.75);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:.3s ease;
backdrop-filter:blur(6px);
}

.modal-overlay.active{
opacity:1;
visibility:visible;
}

.modal-box{
background:#fff;
width:90%;
max-width:520px;
padding:40px;
border-radius:18px;
position:relative;
box-shadow:0 40px 100px rgba(0,0,0,.4);
animation:fadeUp .25s ease;
}

.modal-box h3{
margin-top:0;
color:#064e3b;
font-size:22px;
}

.modal-box p{
font-size:15px;
color:#444;
line-height:1.7;
}

.modal-close{
position:absolute;
top:15px;
right:20px;
border:none;
background:none;
font-size:24px;
cursor:pointer;
color:#555;
}

.modal-accept{
margin-top:25px;
padding:14px 24px;
background:#064e3b;
color:#fff;
border:none;
border-radius:12px;
cursor:pointer;
font-size:15px;
}

.modal-accept:hover{
background:#022c22;
}

.login-success{
background:#d1fae5;
color:#065f46;
padding:10px;
border-radius:8px;
margin-bottom:15px;
font-size:13px;
text-align:center;
}
@keyframes fadeUp{
from{
transform:translateY(15px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}