/* Pantalla de acceso SOMASI, adaptada del patrón visual del proyecto de referencia. */
:root {
    --somasi-primary: #176b68;
    --somasi-primary-dark: #0c4d4b;
    --somasi-accent: #c89525;
    --somasi-ink: #172725;
    --somasi-muted: #65736f;
    --somasi-bg: #f5f3ec;
    --somasi-surface: #fffdf8;
    --somasi-border: rgba(23, 107, 104, .17);
    --somasi-shadow: 0 18px 44px rgba(18, 55, 50, .12);
}

* { box-sizing: border-box; letter-spacing: 0; }

html { background: var(--somasi-bg); min-height: 100%; }

body.auth-page {
    background: var(--somasi-bg) !important;
    color: var(--somasi-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

body.auth-page::before {
    background: var(--somasi-primary);
    content: '';
    height: 100%;
    left: 0;
    opacity: .1;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 8px;
}

.wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 16px;
    position: relative;
}

#formContent {
    background: var(--somasi-surface);
    border: 1px solid var(--somasi-border);
    border-left: 6px solid var(--somasi-primary);
    border-radius: 8px;
    box-shadow: var(--somasi-shadow);
    max-width: 460px;
    overflow: hidden;
    width: 100%;
}

.center-sign, .panel, .card-sign { background: transparent; border: 0; margin: 0; }

.auth-brand {
    border-bottom: 1px solid rgba(23, 107, 104, .12);
    padding: 32px 32px 18px;
    text-align: center;
}

.logo {
    align-items: center;
    color: var(--somasi-primary-dark);
    display: inline-flex;
    font-size: 2rem;
    font-weight: 800;
    gap: .75rem;
    line-height: 1;
    text-decoration: none;
}

.logo:hover { color: var(--somasi-primary); }

.somasi-mark {
    align-items: center;
    background: var(--somasi-primary);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.auth-brand p {
    color: var(--somasi-muted);
    font-size: .92rem;
    margin: .8rem auto 0;
}

.card-title-sign { padding: 24px 32px 0; }

.card-title-sign .title {
    align-items: center;
    background: rgba(200, 149, 37, .14);
    border: 1px solid rgba(200, 149, 37, .28);
    border-radius: 999px;
    color: var(--somasi-primary-dark);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    gap: .45rem;
    margin: 0;
    padding: .48rem .82rem;
    text-transform: uppercase;
}

.card-title-sign .title i { color: var(--somasi-accent); font-size: 1.15rem; }
.card-body { padding: 20px 32px 32px; }
.form-label { color: var(--somasi-ink); font-weight: 700; margin-bottom: .4rem; }
.form-label.small { font-size: .83rem; }

.form-control {
    background: #fff;
    border: 1px solid var(--somasi-border);
    border-radius: 8px;
    color: var(--somasi-ink);
    min-height: 46px;
    padding: .68rem .85rem;
}

.form-control-lg { border-radius: 8px; font-size: 1rem; min-height: 52px; }

.form-control:focus {
    border-color: var(--somasi-primary);
    box-shadow: 0 0 0 .22rem rgba(23, 107, 104, .12);
}

.input-group-text {
    background: #fff;
    border: 1px solid var(--somasi-border);
    color: var(--somasi-muted);
    justify-content: center;
    min-width: 52px;
}

button.input-group-text { cursor: pointer; }
button.input-group-text:hover { background: rgba(23, 107, 104, .08); color: var(--somasi-primary-dark); }

.auth-form-footer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: .75rem;
}

.auth-access-note { color: var(--somasi-muted); font-size: .82rem; }

.btn { border-radius: 999px; font-weight: 700; padding: .72rem 1.35rem; }
.btn-primary { background: var(--somasi-primary); border-color: var(--somasi-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--somasi-primary-dark); border-color: var(--somasi-primary-dark); }
.alert { border-radius: 8px; font-size: .9rem; font-weight: 600; }
.auth-footer { color: var(--somasi-muted); font-size: .82rem; margin: 18px 0 0; text-align: center; }

.fadeInDown { animation: authEnter .42s ease-out both; }
.fadeIn { animation: authFadeUp .5s ease-out both; opacity: 0; transform: translateY(10px); }
.fadeIn.first { animation-delay: .05s; }
.fadeIn.second { animation-delay: .1s; }
.fadeIn.third { animation-delay: .15s; }
.fadeIn.fourth { animation-delay: .2s; }
.shake { animation: authShake .3s ease both; }

@keyframes authEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes authFadeUp { to { opacity: 1; transform: none; } }
@keyframes authShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@media (max-width: 575px) {
    .wrapper { align-items: flex-start; padding: 18px 10px; }
    .auth-brand { padding: 26px 22px 16px; }
    .card-title-sign { padding: 20px 22px 0; }
    .card-body { padding: 18px 22px 26px; }
    .auth-form-footer { align-items: stretch; flex-direction: column; }
    .auth-form-footer .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}