body{
margin:0;
font-family:Segoe UI, Arial;
background:#f3f5f7;
display:flex;
justify-content:center;
align-items:flex-start;  /* ya no centrado vertical */
min-height:100vh;
padding-top:60px;        /* espacio arriba */
}

.wrapper{
text-align:center;
}

.logo{
width:135px;
max-width:100%;
margin-bottom:0px;
display:block;
margin-left:auto;
margin-right:auto;
}

h2{

color:#28a745;
margin:5px 0 0 0;
}

.sub{
color:#777;
margin:0 0 10px 0;
}

.card{

background:white;
padding:30px;
border-radius:12px;
width:360px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);


}

.input-group{

position:relative;
margin-top:12px;
border-color: #28a745;

}

.input-group i{

position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
color:#28a745;

}

.input-group input{

width:100%;
padding:12px 12px 12px 35px;
border-radius:6px;
border:1px solid #ccc;
outline:none;
transition:0.3s;

}

.input-group input:focus{

border-color:#2e7d32;
box-shadow:0 0 5px rgba(46,125,50,0.4);

}

.remember{

display:flex;
align-items:center;
gap:6px;
margin-top:15px;
font-size:14px;

}

.btn-login{

margin-top:15px;
width:100%;
background:#28a745;
color:white;
padding:12px;
border:none;
border-radius:6px;
cursor:pointer;
position:relative;

}

.btn-login:hover{
background:#2e7d32;
}

.spinner{

display:none;
border:3px solid rgba(255,255,255,0.3);
border-top:3px solid white;
border-radius:50%;
width:18px;
height:18px;
animation:spin 1s linear infinite;
margin:auto;

}

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

.secure{

margin-top:15px;
font-size:12px;
color:#777;

}

/* MODAL */

.modal{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
justify-content:center;
align-items:center;
z-index:999;

}

.modal-box{

background:white;
padding:35px;
border-radius:14px;
width:350px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.25);
animation:modalShow 0.4s ease;

}

.modal-logo{

width:80px;
margin-bottom:10px;

}

.modal-title{

color:#2e7d32;

}

.modal-text{

color:#555;
line-height:1.5;
margin-bottom:0px;
}

.modal-btn{

margin-top:20px;
background:#2e7d32;
color:white;
border:none;
padding:12px;
width:100%;
border-radius:6px;
cursor:pointer;

}

.modal-btn:hover{

background:#1b5e20;

}

@keyframes modalShow{

from{
opacity:0;
transform:translateY(-30px) scale(0.9);
}

to{
opacity:1;
transform:translateY(0) scale(1);
}

}
* {
box-sizing: border-box;
}
.modal-content-flex {
display: flex;
align-items: center;
gap: 15px;
margin-top: 0px;
}

.modal-mascota {
width: 130px;
}

.modal-tips {
text-align: left;
font-size: 14px;
color: #555;
}

.autorizacion{
    margin-top:15px;
    font-size:13px;
    display:flex;
    gap:8px;
    align-items:flex-start;
    text-align:left;
}

.autorizacion input{
    margin-top:3px;
}

.btn-login:disabled{
    background:#9e9e9e;
    cursor:not-allowed;
}
select{
    width:100%;
    padding:8px;
    border:2px solid #28a745;
    border-radius:5px;
}
select:focus{
    outline:none;
    box-shadow:0 0 5px #28a745;
}

.input-group {
    position: relative;
    margin-bottom: 15px;
}

.input-group i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #28a745;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border: 2px solid #28a745;
    border-radius: 6px;
    font-size: 14px;
    color: #555;
    background: #fff;
}