/* Pantalla de inicio de sesión — misma composición que el ERP de Contabilidad */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vh, 32px);
    background-color: var(--icfd-navy-900);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(176, 141, 87, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--icfd-navy-800) 0%, var(--icfd-navy-950) 100%);
}
.login-wrapper { width: 100%; max-width: 980px; }
.login-card {
    display: flex;
    min-height: clamp(460px, 68vh, 560px);
    background: var(--icfd-paper);
    border-radius: var(--icfd-radius);
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    border-top: 4px solid var(--icfd-gold);
}
.hero-panel {
    flex: 1.05;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 5vh, 52px) clamp(24px, 3.5vw, 48px);
    color: #fff;
    background: var(--icfd-navy-800);
}
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(217, 196, 154, 0.35);
    pointer-events: none;
}
.hero-seal {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #fff;
    padding: 8px;
    box-shadow: 0 0 0 3px var(--icfd-gold), 0 0 0 9px rgba(176, 141, 87, 0.18);
    margin-bottom: 1.6rem;
    overflow: hidden;
}
.hero-seal img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--icfd-gold-light);
    margin-bottom: 0.6rem;
}
.hero-title {
    font-family: var(--icfd-serif);
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    max-width: 15ch;
}
.hero-rule {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 70%;
    margin: 1.3rem auto;
    color: var(--icfd-gold);
    font-size: 0.6rem;
}
.hero-rule::before, .hero-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--icfd-gold), transparent);
}
.hero-rule i { color: var(--icfd-gold) !important; }
.hero-subtitle {
    font-family: var(--icfd-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.82);
}
.form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(32px, 6vh, 56px) clamp(28px, 4vw, 56px) 28px;
    background: var(--icfd-paper);
}
.form-title {
    font-family: var(--icfd-serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--icfd-navy-800);
    margin: 0;
}
.form-sub {
    color: var(--icfd-muted);
    margin: 0.2rem 0 1.9rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--icfd-line);
}
.form-panel .form-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--icfd-navy-700);
}
.input-group-custom { position: relative; }
.input-group-custom .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--icfd-gold-dark);
    font-size: 0.95rem;
    pointer-events: none;
}
.input-group-custom .form-control {
    padding: 0.78rem 2.8rem 0.78rem 2.6rem;
    font-size: 1rem;
    background: #FFFEFC;
}
.btn-toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--icfd-muted);
    padding: 6px 8px;
}
.btn-toggle-password:hover { color: var(--icfd-navy-800); }
.btn-login {
    width: 100%;
    padding: 0.85rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--icfd-navy-800);
    border: 1px solid var(--icfd-navy-800);
    border-radius: var(--icfd-radius-sm);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-login:hover, .btn-login:focus { color: #fff; background: var(--icfd-navy-700); border-color: var(--icfd-gold); }
.login-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--icfd-line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--icfd-muted);
}
.login-footer i { color: var(--icfd-gold-dark); }

@media (max-width: 820px) {
    .login-card { flex-direction: column; }
    .hero-panel { padding: 36px 24px 30px; }
    .hero-seal { width: 96px; height: 96px; margin-bottom: 1.1rem; }
    .hero-rule { margin: 0.9rem auto; }
    .form-panel { padding: 30px 24px 22px; }
}