.login-container {
--ing-verde: #2e7d32;
--ing-verde-oscuro: #1b5e20;
--ing-verde-claro: #4caf50;
--ing-ambar: #ffc107;
--ing-fondo: #f5f5f5;
--ing-blanco: #ffffff;
--ing-texto: #212121;
--ing-tenue: #757575;
--ing-borde: #e0e0e0;
--ing-error: #d32f2f;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
overflow: hidden;
background: var(--ing-fondo);
}
.login-container.bloqueada .login-panel::before {
background: linear-gradient(135deg, #b71c1c, #e53935);
}
.login-panel {
width: 100%;
max-width: 400px;
background: rgba(255, 255, 255, .97);
border-radius: 32px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
padding: 40px 34px 32px;
position: relative;
z-index: 1;
overflow: hidden;
animation: aparecer .5s ease-out both;
}
.login-panel::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(135deg, var(--ing-verde) 0%, var(--ing-verde-claro) 100%);
}
@keyframes aparecer {
from { opacity: 0; transform: translateY(-28px); }
to   { opacity: 1; transform: translateY(0); }
}
.login-header { margin-bottom: 28px; text-align: center; animation: deslizar .6s ease-out; }
@keyframes deslizar {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
.img-form { display: flex; justify-content: center; margin-bottom: 16px; }
.img-form img {
max-width: 108px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 4px 10px rgba(46, 125, 50, .28));
animation: latir 2.6s ease-in-out infinite;
}
@keyframes latir {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.05); }
}
.login-header h2 {
margin: 0 0 6px;
font-size: 24px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--ing-texto);
}
.login-header p {
margin: 0;
color: var(--ing-tenue);
font-size: 13.5px;
}
.form-group { margin-bottom: 20px; }
.form-label {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 7px;
font-size: 12px;
font-weight: 600;
color: var(--ing-texto);
text-transform: uppercase;
letter-spacing: .04em;
}
.icono-campo { color: var(--ing-verde); flex: none; }
.form-control {
width: 100%;
padding: 15px 16px;
border: 2px solid var(--ing-borde);
border-radius: 14px;
font-size: 15px;
font-family: inherit;
background: var(--ing-fondo);
color: var(--ing-texto);
transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.form-control:hover { border-color: var(--ing-verde-claro); background: #fff; }
.form-control:focus {
outline: none;
border-color: var(--ing-verde);
background: #fff;
box-shadow: 0 0 0 4px rgba(76, 175, 80, .16);
transform: translateY(-1px);
}
.checkbox-container {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.checkbox-container input[type="checkbox"] {
width: 17px;
height: 17px;
cursor: pointer;
accent-color: var(--ing-verde);
}
.checkbox-container label {
font-size: 12.5px;
color: var(--ing-tenue);
cursor: pointer;
}
.forgot-password {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
color: var(--ing-verde);
text-decoration: none;
background: rgba(46, 125, 50, .05);
border: 1px solid transparent;
transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.forgot-password:hover {
background: rgba(46, 125, 50, .1);
color: var(--ing-verde-oscuro);
border-color: var(--ing-verde-claro);
transform: translateY(-1px);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 15px;
border: none;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
margin-top: 6px;
transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-primary {
background: linear-gradient(135deg, var(--ing-verde) 0%, var(--ing-verde-claro) 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(46, 125, 50, .3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(46, 125, 50, .38); filter: brightness(1.04); }
.btn-primary:active { transform: translateY(0); }
.form-footer,
.login-panel .nota {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--ing-borde);
text-align: center;
font-size: 12.5px;
color: var(--ing-tenue);
line-height: 1.65;
}
.form-footer a,
.login-panel .nota a {
color: var(--ing-verde);
font-weight: 600;
text-decoration: none;
font-size: 13.5px;
}
.form-footer a:hover,
.login-panel .nota a:hover { color: var(--ing-verde-oscuro); text-decoration: underline; }
.login-panel .aviso {
border-radius: 14px;
padding: 12px 16px;
margin-bottom: 18px;
font-size: 13.5px;
border: none;
}
.login-panel .aviso.error   { background: #fdecea; color: #a02219; animation: deslizar-error .2s ease-out; }
.login-panel .aviso.exito   { background: #e8f5e9; color: #1b5e20; }
.login-panel .aviso.aviso_  { background: #fff8e1; color: #8a6100; }
@keyframes deslizar-error {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}
.velo {
background: rgba(20, 35, 22, .72);
backdrop-filter: blur(3px);
}
.velo .modal {
border-radius: 26px;
padding: 34px 32px;
box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
border: none;
}
.velo .modal h2 { font-size: 20px; margin-top: 0; }
.velo .modal input {
border-radius: 14px;
padding: 14px 16px;
border: 2px solid var(--ing-borde, #e0e0e0);
font-size: 17px;
letter-spacing: .28em;
text-align: center;
}
.velo .modal button[type="submit"] { border-radius: 14px; padding: 13px 22px; }
@media (max-width: 480px) {
.login-panel { padding: 32px 22px 26px; border-radius: 24px; }
.login-header h2 { font-size: 21px; }
.img-form img { max-width: 92px; }
}
@media (prefers-color-scheme: dark) {
.login-container { background: #14251c; }
.login-panel {
background: rgba(24, 35, 30, .97);
--ing-texto: #e8eeea;
--ing-tenue: #9aa79c;
--ing-borde: #33453b;
--ing-fondo: #1f2b25;
--ing-blanco: #18231e;
}
.form-control { background: #1f2b25; color: #e8eeea; }
.form-control:hover, .form-control:focus { background: #24322b; }
.login-panel .aviso.error  { background: #2d1717; color: #f0b3a6; }
.login-panel .aviso.exito  { background: #14301f; color: #9be8ac; }
.login-panel .aviso.aviso_ { background: #2b2410; color: #f3d07a; }
}