#sslModal{animation: none}
#sslCard{animation: sslIn .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes sslIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes sslShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
.ssl-shake{animation: sslShake .5s ease !important}
.sTab{flex: 1;background: none;border: none;padding: 8px 12px;font-size: 13px;font-weight: 600;color: #94a3b8;cursor: pointer;border-radius: 7px;transition: all .2s;font-family: 'DM Sans', sans-serif}
.sTabOn{background: #fff;color: #0f172a;box-shadow: 0 1px 4px rgba(0,0,0,.1)}
.sInput{display: block;width: 100%;padding: 11px 14px;border: 1.5px solid #e2e8f0;border-radius: 10px;font-size: 14px;background: #f8fafc;margin-bottom: 10px;box-sizing: border-box;transition: border-color .2s, box-shadow .2s;font-family: 'DM Sans', sans-serif;color: #0f172a}
.sInput:focus{outline: none;border-color: #2563eb;background: #fff;box-shadow: 0 0 0 3px rgba(37,99,235,.1)}
.sInput::placeholder{color: #94a3b8}
.sBtnPrimary{display: flex;align-items: center;justify-content: center;gap: 8px;width: 100%;padding: 13px;border: none;border-radius: 10px;font-size: 15px;font-weight: 700;cursor: pointer;background: linear-gradient(135deg, #1d4ed8, #2563eb);color: #fff;transition: all .2s;font-family: 'DM Sans', sans-serif;box-shadow: 0 4px 14px rgba(37,99,235,.3)}
.sBtnPrimary:hover{filter: brightness(1.08);transform: translateY(-1px);box-shadow: 0 6px 20px rgba(37,99,235,.4)}
.sBtnPrimary:active{transform: translateY(0)}
.sBtnPrimary:disabled{opacity: .6;cursor: not-allowed;transform: none;box-shadow: none}
.ssl-badge-topbar{background: #ef4444;color: #fff;font-size: 10px;font-weight: 700;padding: 1px 6px;border-radius: 8px}
.ssl-user-area{display: flex;align-items: center;gap: 8px}
.ssl-user-avatar{border-radius: 50% !important;border: 2px solid rgba(255,255,255,.3)}
.ssl-user-name{color: rgba(255,255,255,.85) !important;font-size: 12px !important;font-weight: 600 !important;text-decoration: none !important}
.ssl-user-name:hover{color: #fff !important;text-decoration: none !important}
.ssl-btn-salir{font-size: 11px !important;color: #64748b !important;border: 1px solid rgba(255,255,255,.1);border-radius: 4px;padding: 2px 8px !important;text-decoration: none !important;transition: all .15s}
.ssl-btn-salir:hover{color: #fff !important;border-color: rgba(255,255,255,.3)}
.ssl-spinner{width: 16px;height: 16px;border: 2px solid rgba(255,255,255,.3);border-top-color: #fff;border-radius: 50%;animation: sslSpin .7s linear infinite;display: inline-block}
@keyframes sslSpin{to{transform: rotate(360deg)}}
@media (max-width: 480px){#sslCard{border-radius: 16px}
#sslCard > div:first-child{padding: 22px 20px 18px}
#sslCard > div:last-child{padding: 18px 18px 20px}
.sTab{font-size: 12px;padding: 7px 8px}}